This is my component. Whenever I select answer it select same answer for all questions but i don't want that what should i fix

const [selectedAnswer, setSelectedAnswer] = useState<string | undefined>(
    undefined,
  );

  if (!quiz || !quiz.questions) {
    return (
      <div className="flex w-max gap-x-3 rounded-md border-2 border-destructive bg-destructive/5 px-6 py-3 text-sm font-medium text-destructive">
        <Bug className="h-5 w-auto" />
      </div>
    );
  }


  const handleAnswerClick = (answer: string) => {
    setSelectedAnswer(answer);
  };

 <ComponentCard>
      <div className="space-y-6">
        {quiz.questions.map((q, index) => (
          <div key={index} className="space-y-3">
            <h4>{q?.question}</h4>
            <RadioGroup
              className="space-y-1.5"
              defaultValue={undefined}
              value={selectedAnswer}
            >
              {q?.answers?.map((a, index) => (
                <div
                  key={index}
                  className="flex cursor-pointer select-none items-center space-x-3 rounded-md border p-3"
                  onClick={() => handleAnswerClick(a.answer)}
                >
                  <RadioGroupItem value={a?.answer!} id={a?.answer} />
                  <div>{a?.answer}</div>
                </div>
              ))}
            </RadioGroup>
          </div>
        ))}
      </div>
    </ComponentCard>

Its rookie mistake but have no idea how to fix it efficently