How do I offset Material-UI Popper (popper.js library) position on y-axis?

Question

I am using a material-ui (v 4.9.5) Popper for a "pop-out" menu as above. It's anchorElement is the selected ListItem on the left. I want the Popper to appear flush with the top of the main menu. However it appears 5px short.

If I look at the Chrome Dev Tools I see the following and the 5px value within the translate3d parameters is the issue. If I change the value to 0px within the Dev Tools the problem is solved.

My question is how do I get this to happen through the code. I've tried the following using modifiers for the underlying popper.js and it does nothing.

 <Popper
    modifiers={{
        offset: {
         enabled: true,
         offset: '-5, 0'
    },
    }}
    className={globalMenuStyle.popperStyle}
    placement="right-end"
    open={isPopoverOpen}
    onClose={handleHidingGlobalMenu}
    anchorEl={anchorElement}>
    {popoverMenuItems}
 </Popper>

Even stranger is that if I experiment and try something like this and try the x-axis for the modifiers it shifts along the x-axis. Why does x-axis work and y-axis doesn't ?

modifiers={{
   offset: {
    enabled: true,
    offset: '0, 50'
},
}}

Answer 1

Use the popperOptions prop to provide the options obj to the popper.js instance like so:

<Popper
   popperOptions={{
      modifiers: {
         offset: {
             offset: '-5,0',
         },
      },
    }}
    ....
</Popper>