NextJS : Parallax in NextJS using plain html, css

I am trying to create a parallax effect without importing React and ReactDom. I am using basic html and css to build this parallax. I don't have a choice but to use:

import Image from 'next/image'

How do I create this parallax effect? Here is my code: Pages Folder -> index.js

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Image from 'next/image'

export default function Home() {
  return (
    <div className={styles.container}>

      <div className={styles.section}>

      <Head>
        <title>Parallax Effect</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Image className={styles.bg}
        src="/../public/bg.jpg"
        width={2049}
        height={2049}
        // objectFit="cover"
        // quality={100}
      />
      <Image className={styles.moon}
        src="/../public/moon.png"
        width={2049}
        height={1152}
        // objectFit="cover"
        // quality={100}
      />
      <Image className={styles.mountain}
        src="/../public/mountain.png"
        width={2049}
        height={1152}
        // objectFit="cover"
        // quality={100}
      />
      <Image className={styles.road}
        src="/../public/road.png"
        width={2049}
        height={1152}
        // objectFit="cover"
        // quality={100}
      />

      <h2 className={styles.text}>Moon Light</h2>

      </div>
    </div>
  )
}

styles folder -> global.css

html, body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

styles folder -> Home.module.css

.container {
  background: #0a2a43;
  min-height: 1500px;
}
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section > Image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

This basic html and css easily creates the bare minimum required to create the background for the parallax. For some reason NextJS just doesn't seem to work when I add this code. Can you please tell me what's wrong here.