Adding divider to MUI MenuItem adds extra border

Question

I needed to use a divider to the MUI MenuItem and it adds an extra border to the item where the divider has been added. THe highlighted item on the image is the item where I set the divider= true and the border is visible. How can this be handled so that it doesn't add the border?

Answer 1

THe issue was that when the menu item divider has been set to true, it was adding some margin to the the <li> item. So setting it to zero only when the divider is on fixed the issue.

It is fixed by adding the following check on the <MenuItem>:

 <MenuItem 
    ...
    divider={divider}
    sx={{ ...(divider && { margin: 0 }) }} 
 >