Estoy tratando de completar una selección de MUI con opciones de la respuesta JSON de una API. Actualmente, todas las Choices se están insertando en un MenuItem dentro de Select.

Es probable que las opciones cambien en el futuro, por lo que me gustaría evitar codificarlas de forma rígida.

¿Cómo puedo aplicar un .map para que los elementos de MenuItems muestren las Choices de JSON por separado en lugar de que se muestren en la misma línea?

Aquí está mi JSON y, a continuación, se muestran todos los demás datos.

 { "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} /> ); }); });