React-popper overflows viewport

Question

I'm using react-popper with the following properties

usePopper = (refEle, popperEle, {
    placement : 'auto',
    modifiers : {
        name: 'offset',
        options: {
            offset:[0, 10], 
        },
    },
    {
        name: 'preventOverflow',
        options: {
            boundariesElement: 'viewport'
        },
    }
}

I have quite a few options inside the popper and the popper does not seem to have a scroll. When I click on the toggleButton, the popper opens up but half the content is cut off because they fall outside the viewport.

Could someone tell me what I should do?

Answer 1

modifiers property should be an array not an object, eg.

usePopper = (refEle, popperEle, {
  placement: 'auto',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset:[0, 10], 
      },
    },
    {
      name: 'preventOverflow',
      options: {
        boundariesElement: 'viewport'
      },
    },
  ]
}