I have a JSON data and I created a dynamic form and I have some radio buttons and I said that if type of question was for example 3, render the RadioBtn component and there are some questions that have type 3. I just want to allow user to choose only one radio button and I tried to get name attribute, but the problem is that when I have 3 questions that have type 3, when I choose one radio button in the first question, and choose for the second question, the answer for the first question is gone!!! and it is because of that all question have name attribute and I don't know what to do!!

const Elements = ({ question, handleChange }) => {
  console.log(question.type);
  switch (question.type) {
    case 0:
    case 1:
      return <Input question={question} handleChange={handleChange} />;
    case 2:
      return <DatePick question={question} handleChange={handleChange} />;
    case 3:
      return <RadioBtn question={question} handleChange={handleChange} />;
  
    default:
      return null;
  }
};

export default Elements;

and this is RadioBtn component:

import React, { useContext } from "react";
import { FormContext } from "./FormContext";

const RadioBtn = ({ question, handleChange }) => {
  console.log("id", question.id);
  return (
    <div>
      <label>{question.text}</label>
      <label style={{ color: "gray", fontSize: "12" }}>
        {question.helptext ? question.helptext : null}
      </label>
      {question.list.map((el) => (
        <div>
          <label>{el}</label>
          <input
            type="radio"
            name="radioBtn"
            value={el}
            onChange={(e) => handleChange(question.id, e)}
          />
        </div>
      ))}
    </div>
  );
};

export default RadioBtn;