TypeError: Cannot read properties of null (reading 'useRef')

I have used the following on my page

import React from 'react'
import { Typography } from '@material-ui/core'
import {RemoveScroll} from 'react-remove-scroll';

const Test = () => {

return (
        <main>
            <RemoveScroll>
                <div><Typography>Test scrollable</Typography></div> 
            </RemoveScroll>  
        </main>
    )

}

export default Test

But I am getting the following error. I assume I just have something wrong but can anyone help? Using React 17.0.2.

TypeError: Cannot read properties of null (reading 'useRef') useRef C:/Git2/thrive-app-react/frontend/node_modules/react/cjs/react.development.js:1628 1625 | } 1626 | function useRef(initialValue) { 1627 | var dispatcher = resolveDispatcher();

1628 | return dispatcher.useRef(initialValue); 1629 | } 1630 | function useEffect(create, deps) { 1631 | var dispatcher = resolveDispatcher(); View compiled (anonymous function) C:/Git2/thrive-app-react/frontend/node_modules/react-remove-scroll/dist/es2015/UI.js:13 10 | Removes scrollbar from the page and contain the scroll within the Lock 11 | / 12 | var RemoveScroll = React.forwardRef(function (props, parentRef) { 13 | var ref = React.useRef(null); 14 | var _a = React.useState({ 15 | onScrollCapture: nothing, 16 | onWheelCapture: nothing, View compiled renderWithHooks C:/Git2/thrive-app-react/frontend/my-app/node_modules/react-dom/cjs/react-dom.development.js:14985 14982 | } 14983 | } 14984 | 14985 | var children = Component(props, secondArg); // Check if there was a render phase update | ^ 14986 | 14987 | if (didScheduleRenderPhaseUpdateDuringThisPass) { 14988 | // Keep rendering in a loop for as long as render phase updates continue to

theKashey / react-remove-scroll

TypeError: Cannot read properties of null (reading 'useRef') #72