When I render this question component multiple times in app.js the nested div elements are not rendering.

Question component code:

const Question = () => {
  return (
    <div className="question-box">
      <TextField
        fullWidth
        label="Enter Question!"
        id="fullWidth"
        multiline
        minRows={2}
        maxRows={10}
        color="success"
      />

      <div>
        <Stack spacing={2}>
          <TextField id="filled-basic" label="Option1" variant="filled" />
          <TextField id="filled-basic" label="Option2" variant="filled" />
          <TextField id="filled-basic" label="Option3" variant="filled" />
          <TextField id="filled-basic" label="Option4" variant="filled" />
        </Stack>
      </div>

      <div>
        <Stack direction="row" spacing={10}>
          <TextField
            id="filled-number"
            label="Time(sec)"
            type="number"
            InputProps={{
              inputProps: {
                max: 50,
                min: 20,
              },
            }}
          />
          <TextField id="filled-number" label="Correct-Option" type="number" />
        </Stack>
      </div>
    </div>
  );
};

export default Question;