I am trying to populate an MUI select with choices from an API's JSON response. Currently, all Choices are being pushed into one MenuItem within the Select.

The Choices are likely to change in the future so I would like to avoid hard coding them.

How can I apply a .map to get the MenuItemsto display the JSON Choices separately rather than having them display on the same line.

Here is my JSON, and below is how I am displaying all other data.

{
  "question_groups": [
    {
      "GroupName": "DDD",
      "questions": [
        {
          "Question": "1. Do you want a Drink?",
          "QuestionType": "Single Choice",
          "Response": null,
          "Choices": [
            "Yes",
            "No"
          ]
        }
      ],
      "SizingId": null
    },
}

const SelectQuestion = ({ question }) => {
  return (
    <Box>
      <TextField value={question?.Question || ""} />
      <Select label="Question" >
        <MenuItem value={question?.Choices || ""}>{question?.Choices || ""}</MenuItem>
      </Select>
      <Divider />
    </Box>
  );
};

const TextQuestion = ({ question }) => {
  return (
    <Box>
      <TextField />
      <TextField />
      <Divider />
    </Box>
  );
};

const questionComps = questions["question_groups"]?.map((group, i) => {
  return group["questions"]?.map((question, i) => {
    return question["QuestionType"] === "Text" ? (
      <TextQuestion key={`${i}${question.Question}`} question={question} />
    ) : (
      <SelectQuestion key={`${i}${question.Question}`} question={question} />
    );
  });
});