Why my radio button is not working as expected

Question

I am currently learning React JS and tried to do some hands-on by myself but having some issues in creating Quiz App where, I am using radio buttons and fetching data from TRIVIA API so that I can re-use radio-button component.

But issue I am facing is that whenever I am clicking on radio buttons only one radio button is getting selected others were unchecked itself don't know what I am doing wrong.

Here's my Code Sandbox link - Quiz App using TRIVIA API.

Thanks in advance.

export default function Question(props) {
  const [correct, setCorrect] = React.useState({ answer: "" });

  function handleChange(event) {
    setCorrect((prevData) => event.target.value);   }

  return (
    <section className="">
      <legend className="quiz">{props.question}</legend>

      <div className="radio-button">
        <input
          type="radio"
          className="btn-check"
          name={props.question} // Questions - option
          value={props.correctAns} // Value of the radio button
          checked={correct.answer === props.correctAns}
          id={props.correctAns}
          onChange={handleChange}
        />
        <label className="btn choice " htmlFor={props.correctAns}>
          {props.correctAns}
        </label>

        <input
          type="radio"
          className="btn-check"
          name={props.question} // Questions - option
          value={props.wrongAns[0]} // Value of the radio button
          checked={correct.answer === props.wrongAns[0]}
          id={props.wrongAns[0]}
          onChange={handleChange}
        />
        <label className="btn choice" htmlFor={props.wrongAns[0]}>
          {props.wrongAns[0]}
        </label>

        <input
          type="radio"
          className="btn-check"
          name={props.question} // Questions - option
          value={props.wrongAns[1]} // Value of the radio button
          checked={correct.answer === props.wrongAns[1]}
          id={props.wrongAns[1]}
          onChange={handleChange}
        />
        <label className="btn choice" htmlFor={props.wrongAns[1]}>
          {props.wrongAns[1]}
        </label>

        <input
          type="radio"
          className="btn-check"
          name={props.question} // Questions - option
          value={props.wrongAns[2]} // Value of the radio button
          checked={correct.answer === props.wrongAns[2]}
          id={props.wrongAns[2]}
          onChange={handleChange}
        />
        <label className="btn choice" htmlFor={props.wrongAns[2]}>
          {props.wrongAns[2]}
        </label>
      </div>
      <hr />
    </section>
  );
}

Answer 1

In the Question component the correct state is the selected answer string literal. Update the initial correct state to be an empty string and use checked={correct === props.correctAns} in the radio input.

const [correct, setCorrect] = React.useState(""); // <-- string

function handleChange(event) {
  setCorrect((prevData) => event.target.value); // <-- string
}

...

<input
  type="radio"
  className="btn-check"
  name={props.question}
  value={props.correctAns} // <-- string
  checked={correct === props.correctAns} // <-- string comparison
  id={props.correctAns}
  onChange={handleChange}
/>