Window is not defined error when using "react-hide-on-scroll" package

Question

I am creating a react app where I want to hide the bottom arrow from the hero section over scroll. For that I have installed this "react-hide-on-scroll" package. Now, I am getting window is not defined error. I have tried fixing it using conditional rendering and checking if the window object is defined or not but I got hydration error after that. How can I fix it so that it works perfectly?

import { HideScroll } from "react-hide-on-scroll";

export default function Earn() {
  
  return (
    <>
      
        <Container>
          <div>
            <div
              className={`flex justify-center items-center lg:flex-row flex-col ${styles.heroEarn}`}
            >
              <div className={styles.earnHeaderContainer}>
                <EarnHeader />
                <HideScroll variant="down">
                  <a
                    className={`lg:hidden ${styles.bottomLinkSmall}`}
                    onClick={() => {
                      let pageHeight = window.innerHeight;
                      window.scrollTo({
                        top: pageHeight,
                        behavior: "smooth",
                      });
                    }}
                  >
                    <img
                      className="downArrowImg"
                      src="assets/misc/bottom-arrow.png"
                    />
                  </a>
                </HideScroll>
              </div>

This is the error that I got after running this code: Error Image