Estoy trabajando en un formulario que tiene una combinación de campo de entrada y botón de opción. Cada vez que selecciono el botón de opción, no se selecciona, pero el valor se actualiza en el estado del formulario. Por alguna razón, el botón de radio no se muestra seleccionado

 const InputForm = () => { const [form, setForm] = useState({name: "", job: "no" }); const {name, job} = form; const handleJob = (e) => { let value = e.target.value; setForm({ ...form, job: value }); }; const onInputChange = (e) => { setForm({...form, [e.target.name]: e.target.value}); } return ( <> <input type="text" className="form-control input-text-box" placeholder="Name" value={name} onChange={onInputChange} /> <div className="form-check-inline mx-2"> <input type="radio" className="form-check-input" name="radioOption" value="yes" onChange={handleJob} checked={job === "yes"} />{" "} <label className="form-check-label" for="radioOption"> Yes&nbsp; </label> <input type="radio" name="radioOption" className="form-check-input" value="no" onChange={handleJob} checked={job === "no"} />{" "} <label className="form-check-label" for="radioOption"> No </label> </div> </> ); }; export default InputForm;