Hi I am trying to replicate the parallax effect from this wordpress website https://cfs-me.com/ on react and next.js.

I am trying to achieve this with react-scroll-parallax npm package.

my _app.js file is.....

import TopNav from '../components/TopNav';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'antd/dist/antd.css';
import { ParallaxProvider } from 'react-scroll-parallax';
import '../public/css/styles.css';

function MyApp ({ Component, pageProps }) {
    return (
    <>
        <TopNav />
        <ParallaxProvider>
            <Component {...pageProps} />;
        </ParallaxProvider>
    </>
    )
}

export default MyApp;

and in the index.js....

import Image from 'next/image'
import { Parallax } from 'react-scroll-parallax'

const Index = () => {
    return (
        <>

            <div className="content">
                <Parallax offsetYMin={200} offsetYMax={1500}>
                    <h1 className="jumbotron text-center bg-primary titlemain">hello</h1>

                </Parallax>
                <Parallax offsetYMin={-500} offsetYMax={2000}>
                    <Image src="/public/images/tree-geec0e486b_1920.jpg" layout="fill" />
                </Parallax>

            </div>

            <style jsx>{`
              .titlemain {
              color: white;
              margin: 0;
              height: 300px;
              display: flex;
              align-items: center;
              justify-content: center;
              }
            `}</style>
        </>
    )
};

export default Index;

I cant get the image to load, and I don't quite understand the two parallax elements that I got from the docs. Chrome developer tools reads them as inner and outer. Any help would be greatly appreciated. Thanks