UseParallax ref hook not working with components in NextJs

I'm trying to use the useParallax hook on an element in my js file. I'm using NextJs with ReactJs as well as styled components. I used the hook in the following way:

Mainland.js

import React, { useEffect, useRef } from 'react';
import styled, { keyframes } from 'styled-components';
import { useParallax } from 'react-scroll-parallax';

const Mainland = () => {
const { parallaxRef } = useParallax({ speed: 20 }); // set up the hook to use with useRef

const StyledDiv = styled.div`` //Styled Component

return (
<StyledDiv ref={parallaxRef}>
...
</StyledDiv>

The error here is the following:

Error: You must assign the ref returned by the useParallax() hook to an HTML Element.

So I tried to use it without styled components and straight to an HTML element and it still didn't work.

Extra Information: I used the parallax provider in my _app.js file in the following way:

import Layout from '../Components/Layout';
import '../styles/globals.css';
import { ParallaxProvider } from 'react-scroll-parallax';

function MyApp({ Component, pageProps, ...appProps }) {
  const isLayoutNeeded = [`/Contact`].includes(appProps.router.pathname);
  return (
    <>
      <Layout state={isLayoutNeeded}>
        <ParallaxProvider>
          <Component {...pageProps} />
        </ParallaxProvider>
      </Layout>
    </>
  );
}

export default MyApp;

Additional info: https://react-scroll-parallax.damnthat.tv/docs/usage/hooks/use-parallax