I am working on form which have combination of input field and radio button. Whenever I select the radio button, it is not getting selected but value is getting update in form state . For some reason, radio button is not showing selected

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;