Unable to populate a list in reactjs from an array

You need to return something from map, In your case you have to return MenuItem as

Live Demo

Below will implicitely return the MenuItem

{
  app.map((item, index) => <MenuItem value={item}>{item}</MenuItem>);
  // without { and }
}

or You can explicitly return the MenuItem

{
  app.map((item, index) => {
    console.log(item);
    return <MenuItem value={item}>{item}</MenuItem>;
  });
}

EXPLANATION

Since, you are using map here which should be used if we want to map over the array and return something from it and map will return an array of elements and what you want is to map over the app array and return MenuItem elements because whatever you will return from map will eventually become React children.

return (
        <div>
            {app.map((item, index) => {
                (
                    <MenuItem value={item} key={item}>
                        {item}
                    </MenuItem>
                );
            })}
        </div>
    );

Above code snippet gets converted to

return /*#__PURE__*/React.createElement("div", null, app.map((item, index) => {
    /*#__PURE__*/
    React.createElement(MenuItem, {     // NOTICE, you are not
      value: item,                      // returning any React
      key: item                         // Elements from here
    }, item);
  }));

So, you should return from map

2 Issue

1. console.log(item), to console.log(item); // comma to semicolon
2. <MenuItem value={item}>{item}</MenuItem > to return <MenuItem value={item}>{item}</MenuItem> // need to return