I recently started on a personal project for myself and used the Parallax component from the react-scroll-parallax package. Here is the documentation in advance: https://react-scroll-parallax.damnthat.tv/docs/intro

I successfully applied it, but the problem is that there is extra whitespace whenever I'm scrolling it.

This is the page before you scroll The page after you scroll And here is the result I want

I get the result whenever I disable the Parallax component. This is the code I use:

<Parallax speed={25}>
  <div className="header-image h-screen">
    <div
      id="welcomeMessage"
      className="welcomeMessage relative text-9xl font-bold text-center text-white antialiased cursor-pointer tracking-wide shadow-text top-1/2 left-1/2 z-1"
    >
      <Typewriter
        onInit={(typewriter) => {
          typewriter
            .typeString("Welconr!")
            .changeDelay(175)
            .pauseFor(200)
            .deleteChars(3)
            .changeDelay(150)
            .pauseFor(150)
            .typeString("me!")
            .changeDelay(175)
            .start();
        }}
      />
    </div>
  </div>
  <div className="header-svg-clip">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="h-5 w-5 text-white arrowDown"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fillRule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
        clipRule="evenodd"
      />
    </svg>
  </div>
</Parallax>

I hope there is someone who can help me. If you need anything more, just comment and I'll come back to you. Thanks in advance!