tengo dos botones uno se llama "si" y el otro "no" y necesito que al darle clic en "si" me abra un div que su condición sea "si" se ejecute y lo mismo con el botón de "no", y si por ejemplo le doy clic al boton "si" me debe ocultar el div de "no" si llegara a estar abierto y lo mismo con el boton "no", tengo mi algoritmo pero no he logrado que funcione.
import React,{useState} from 'react'
function Pruebas3() {
const [value2, setValue2] = useState("");
return (
<div>
<div className="col-sm-6">
<div className="form-check">
<input
type="button"
name="boton1"
value="no"
onChange={(e) => setValue2(e.currentTarget.value) && value2 === "no"}
/>
<input
type="button"
name="boton1"
value="si"
onChange={(e) => setValue2(e.currentTarget.value) && value2 === "si"}
/>
</div>
</div>
<div className="col-sm-7">
{value2 === "si" && (
<div className="card">
<div className="card-body">
<h1>DIV si</h1>
</div>
</div>
)}
</div>
<div className="col-sm-7">
{value2 === "no" && (
<div className="card">
<div className="card-body">
<h1>DIV no</h1>
</div>
</div>
)}
</div>
</div>
)
}
export default Pruebas3