javascript – Why is React Router Hyperlink taking too lengthy to scroll when clicked on?

I am utilizing the perform in React for my Nav bar, and when the consumer clicks on one, it ought to robotically scroll to a sure a part of the web page. My code does this, however there’s a couple of 1.5 second delay earlier than it truly performs the motion. How can I repair this?

That is my Navbar.js code:

import React from "react";
import { Hyperlink } from 'react-scroll';
import { FaBars, FaTimes } from 'react-icons/fa';
import { useState, useEffect } from "react";
import '../types/Navbar.css';


const Navbar = () => {

  const [click, setClick] = useState(false);
  const handleClick = () => setClick(!click on);
  const closeMenu = () => setClick(false);
  const [fix, setFix] = useState(false);

  const setFixed = () => {
    if (window.scrollY >= 950) {
      setFix(true);
    } else {
      setFix(false);
    };
  };

  window.addEventListener("scroll", setFixed);
  return (
      <div className={repair ? 'header energetic' : 'header'}>
          <nav className={repair ? 'navbar mounted' : 'navbar'}>
              <div className="hamburger" onClick={handleClick}>
                  {click on ? (<FaTimes measurement={30} model={{ shade: '#ffffff' }} />)
                      : (<FaBars measurement={30} model={{ shade: '#ffffff' }} />)}
              </div>
              <ul className={click on ? "nav-menu energetic" : "nav-menu"}>
                  <li className="nav-item">
                    <Hyperlink to="header" spy={true} easy={true} offset={-100} onClick={closeMenu} id="homeLink">House</Hyperlink>
                  </li>
                  <li className="nav-item">
                    <Hyperlink to="aboutMe" spy={true} easy={true} offset={-100} onClick={closeMenu}>About</Hyperlink>
                  </li>
                  <li className="nav-item">
                    <Hyperlink to="/" spy={true} easy={true} offset={50} onClick={closeMenu}>Resume</Hyperlink>
                  </li>
                  <li className="nav-item">
                    <Hyperlink to="/" spy={true} easy={true} offset={50} onClick={closeMenu}>Initiatives</Hyperlink>
                  </li>
              </ul>
          </nav>
      </div>
  )
}

export default Navbar;

And that is my Navbar.css code, incase it is necessary in any respect:

.header {
  place: mounted;
  top: 90px;
  width: 100%;
  prime: 0;
  left: 0;
  z-index: 1;
  transition: .3s ease-in;
  overflow: hidden;
  background-color: clear;
}

.header.energetic {
  background-color: rgba(0,0,0,.9);
}

.header .navbar {
  show: flex;
  justify-content: heart;
  align-items: heart;
  margin: auto;
  top: 100%;
  padding: 0 1rem;
}

.header .nav-menu a {
  shade: #ffffff;
}

.header .nav-menu {
  show: flex;
}

.header .nav-item {
  padding: 1rem;
  font-weight: 500;
}

.header .nav-item a:hover {
  padding-bottom: 4px;
  shade: #ffea00;
  border-bottom: 3px stable #ffea00;
}

.hamburger {
  show: none;
}

.nav-item {
  list-style: none;
}

#homeLink {
  text-decoration: none;
}

@media display screen and (max-width:940px) {
  .header {
      max-width: 100%;
      background-color: rgba(0,0,0,.9);
  }

  .header .navbar {
      max-width: 100%;
      justify-content: space-between;
  }

  .hamburger {
      show: block;
  }

  .nav-menu {
      place: mounted;
      left: -100%;
      prime: 90px;
      flex-direction: column;
      background-color: rgba(0,0,0,.9);
      width: 100%;
      top: 90vh;
      z-index: 999;
      text-align: heart;
      transition: .3s;
  }

  .nav-menu.energetic {
      left: 0;
  }

  .nav-item {
      margin: 1.5rem 0;
  }

  .header .navbar img {
      width: 150px;
  }
}