I found this guide which works: https://codepen.io/geoffgraham/pen/LogERe

I've created this helper that uses the code in my react app:

 export const removeBodyScrollingWhenModalOpen = (
        modalOpen: boolean,
    ) => {
        if (modalOpen) {
            document.body.style.position = 'fixed';
            document.body.style.top = `-${window.scrollY}px`;
        } else {
            const scrollY = document.body.style.top;
            document.body.style.position = '';
            document.body.style.top = '';
            window.scrollTo(0, parseInt(scrollY || '0') * -1);
        }
 };

When used with the modal:

const handleClose = () => {
    onClose(false);
    removeBodyScrollingWhenModalOpen(false);
};

useEffect(() => {
    removeBodyScrollingWhenModalOpen(open);
}, [open]);

However, to make the code work properly and not loose scroll position when the modal is closed, I need to add this bit of code:

window.addEventListener('scroll', () => {
  document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);
});

But not sure how to implement that with my hook above, any ideas?