How to wrap text in MUI MenuItem?

Question

So I have some text that I need to show in the popover. I have the following code that makes the text to appear in one line. I need to make the text wrapped to have them displayed in multiple lines for UI reason but so far my update has not been successful. Any idea?

<Popover
  anchorEl={target}
  open={open}
  anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
  targetOrigin={{ horizontal: 'left', vertical: 'bottom' }}
  onRequestClose={handleRequestClose}
  animation={PopoverAnimationVertical}
>
  <Menu autoWidth={true}>
    <MenuItem style={{ width: '200px', height: '200px' }}>
      <p style={{ display: 'flex', flexWrap: 'wrap' }}>
        'aslkjflajdsljflskdjflsdfjlsjdfjdfjlasjkfadlsf'
      </p>
    </MenuItem>
    //this does not work....
  </Menu>
</Popover>

Answer 1

Try resetting the whiteSpace style --

 <MenuItem style={{whiteSpace: 'normal'}}>  
   <p>This song is just six words long. This song is just six words long.  This song is just six words long.  This song is just six words long.</p> 
 </MenuItem>