Material UI Select Grouping MenuItem - Value does not hold

Question

My Material UI React code needs to group MenuItem in Select. Yet this is not working. Default value does not get selected. Below is my example code. When I remove the the div tag, things work. For hours today I searched for a solution.

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';

export default function GroupedSelect() {
  let array=[1,2,3,4];

  return (
    <div>
        <Select  id="grouped-select" value={4}>
        {array.map(item => (
          <div>
            <MenuItem value={item}>{item}</MenuItem>
          </div>
        ))}
        </Select>
    </div>
  );
}

Answer 1

I found the solution. I remembered that I can use JavaScript to assemble JSX. That did it.