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?