Radio Button already being visually selected when next question is clicked

I'm having trouble with my Radio button, everytime the user goes to the next page, the radio button is already on one of the answers. I tried checked & defaultChecked but both have not worked. I would really appreciate any help :)

Here is the code for it

const Answer = (props) => {
  const handleSelect = () => {
    props.onAnswerSelected(props.answerId, props.questionId);
  };
  return (
    <div className="radio-group">
      <input
        type="radio"
        id={props.answerId}
        name={props.questionId}
        value={props.answerId}
        onChange={handleSelect}
      />
      <div className="button">
        <label htmlFor={props.answerId}>{props.answerContent}</label>
      </div>
    </div>
  );
};

const AnswerOptionList = (props) => {
  return props.answerOptions.map((answerOption, index) => (
    <Answer
      key={index}
      answerContent={answerOption.content}
      answerId={answerOption.id}
      questionId={props.questionId}
      allAnswers={props.allAnswers}
      onAnswerSelected={props.onAnswerSelected}
    />
  ));
};

And here is the code sandbox https://codesandbox.io/s/jolly-antonelli-ekzesm?file=/src/components/Answer.js