React: Cannot show button when element is true

this is my code:

const Agregar = ({inputPregunta, validatePregunta}) => {
  
  return(
    <div id="content">
      <h2>¿Cual es tu pregunta?</h2>
      <input id="valorPregunta" type="text" placeholder="Añade aqui tu pregunta..." onChange={(e) => inputPregunta(e)}/>
      {validatePregunta && <button>Agregar</button>}
    </div>
  );
}

What i am trying to do is when the input has something entered the prop validatePregunta (default is false) comes to true and the button element shows, for that i tried to do a method in the App.js file like this:

actualizarPregunta = (e) => {
    this.setState({inputPregunta: e.target.value})
    
    if(this.state.inputPregunta.trim().length > 0){
      this.setState({validatePregunta: true})
    } else {
      this.setState({validatePregunta: false})
    }
  }

But nothing shows, is there's something that i am doing wrong?