load in another div checkbox selected - reactjs

Question

I have two buttons, one is called "select" and the other is called "selected" and when I click on select it loads "3 div" each one contains a checkbox and what I need is that when I select a checkbox it also appeared with the div in "selected" when I clicked the select button, tried several ways but couldn't get it to work, sent my code.

what I need: is that when selecting any of the 3 checks that I have these also appear when I go to the "selected" div

import React,{useState} from 'react'

function Pruebas3() {

  const [value2, setValue2] = useState("");

  const handlerOnClick = (e) => {
    setValue2(e.target.value)
  }
  
  return (
    <div>
        <div className="col-sm-6">
        <div className="form-check">

        <input type="button" name="boton1" value="seleccionar"         
            onClick={handlerOnClick}
        /> 
        
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
          <input type="button" name="boton1" value="seleccionados"  onClick={handlerOnClick}
          /> 
        </div>
      </div>

      <div className="col-sm-7">
        {value2 === "seleccionar" && (
          <div className="card">
            <div className="card-body">

        <div name="check1" >Div1<input type="checkbox" name="check_1" /></div>
        <div name="check2" >Div2<input type="checkbox" name="check_2"/></div>
        <div name="check3" >Div3<input type="checkbox" name="check_3"/></div>

            </div>
          </div>
        )}
      </div>
      <div className="col-sm-7">
        {value2 === "seleccionados" && (
          <div className="card">
            <div className="card-body">
              <h1>CHECK seleccionados</h1>
              {
                  if(check_1 == true){
                    <div name="check1" >Div1<input type="checkbox" name="check_1" /></div>
                  }else if (check_2 == true){
                    <div name="check2" >Div2<input type="checkbox" name="check_2" /></div> 
                  }else if (check_3 == true){
                    <div name="check3" >Div3<input type="checkbox" name="check_3" /></div> 
                  }
              }
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default Pruebas3

Answer 1

Use a controlled input to get the state of the checkbox.

const App = () => {
  const [checked, setChecked] = useState(false);

  const handleChange = () => setChecked(!checked)

  // Now that you have to checked value you can do conditional rendering
  return (
        <input
          type="checkbox"
          checked={checked}
          onChange={handleChange}
  );
};