How do I position my component to not be under my NavBar while using react-scroll?

I am using react-scroll to smoothly scroll through four components. When I click one of the components from the NavBar, it scrolls the component to the top of the screen, rather than the bottom of the NavBar. I added an image to show how the NavBar is hiding some of my information. NavBar hiding component

My NavBar looks like this

 <nav className="sticky z-10 top-0 font-semibold text-xl bg-nature-green grid grid-cols-3 items-center">
      <a href="home" className="flex no-underline text-black">
        <img
          className="h-8 w-8 "
          src="https://www.freeiconspng.com/thumbs/letter-j-icon-png/letter-j-icon-png-26.png"
        />
        <span>BRAND</span>
      </a>
      <div className="flex sm:justify-center space-x-8 ">
        {[
          ["Home", "home"],
          ["About", "about"],
          ["Products", "products"],
          ["Find Us", "find"],
        ].map(([title, url]) => (
          <Link
            to={url}
            spy={true}
            smooth={true}
            className="p-3 focus:bg-clicked-green hover:bg-selected-green no-underline text-black"
          >
            {title}
          </Link>
        ))}
      </div>
      <div className="flex space-x-8 justify-end">
        {[twitter, twitter, instagram, instagram].map((icon) => (
          <a>
            <img className="h-w right-0" src={icon} />
          </a>
        ))}
      </div>
    </nav>

Although I have not tried it yet, I am assuming that making each component 120% in height or something would fix the issue of the NavBar basically scrolling too much, but I do not want so much space, and am hoping there is a different way to fix it.

I am using TailwindCSS, and have h-screen for the height of each component. Here is my GitHub link if you need to look at my code! GitHub

Just checked your project, you are using sticky navbar and the react-scroll is not able to detect your navbar when it scrolls down, hence you are getting that effect. As a work around you can use offset property of link component, such as

       <Link
        to={url}
        spy={true}
        smooth={true}
        isDynamic={true}
        offset={-110}
        className="p-3 focus:bg-clicked-green hover:bg-selected-green no- 
        underline text-black"
      >
        {title}
      </Link>

This would help you get some extra padding and your navbar would not overlap with your content.