Navbar Components (About,Work and Contact) not scrolling to the respective sections on being clicked

[Supratip1]

The About, Work and Contact is not scrolling to the respective sections on being clicked. They are becoming active and changing to white color but not scrolling to their respective sections. Here Is my code for Navbar.jsx:

import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import { styles } from "../styles"; import { navLinks } from "../constants"; import { logo, menu, close } from "../assets";

const Navbar = () => { const [active, setActive] = useState(""); const [toggle, setToggle] = useState(false); const [scrolled, setScrolled] = useState(false);

useEffect(() => { const handleScroll = () => { const scrollTop = window.scrollY; if (scrollTop > 100) { setScrolled(true); } else { setScrolled(false); } };

window.addEventListener("scroll", handleScroll);

return () => window.removeEventListener("scroll", handleScroll);

}, []);

return (

<nav
  className={`${
    styles.paddingX
  } w-full flex items-center py-5 fixed top-0 z-20 ${
    scrolled ? "bg-primary" : "bg-transparent"
  }`}
>
  <div className='w-full flex justify-between items-center max-w-7xl mx-auto'>
   <Link
      to='/'
      className='flex items-center gap-2'
      onClick={() => {
        setActive("");
        window.scrollTo(0, 0);
      }}
    >
      <img src={logo} alt='logo' className='w-9 h-9 object-contain' />
      <p className='text-white text-[18px] font-bold cursor-pointer flex '>
        Supratip | 
        Software Developer &nbsp;
        <span className='sm:block hidden'> </span>
      </p>
    </Link>

    <ul className='list-none hidden sm:flex flex-row gap-10'>
      {navLinks.map((nav) => (
        <li
          key={nav.id}
          className={`${
            active === nav.title ? "text-white" : "text-secondary"
          } hover:text-white text-[18px] font-medium cursor-pointer`}
          onClick={() => setActive(nav.title)}
        >
          <a href={`#${nav.id}`}>{nav.title}</a>
        </li>
      ))}
    </ul>

    <div className='sm:hidden flex flex-1 justify-end items-center'>
      <img
        src={toggle ? close : menu}
        alt='menu'
        className='w-[28px] h-[28px] object-contain'
        onClick={() => setToggle(!toggle)}
      />

      <div
        className={`${
          !toggle ? "hidden" : "flex"
        } p-6 black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl`}
      >
        <ul className='list-none flex justify-end items-start flex-1 flex-col gap-4'>
          {navLinks.map((nav) => (
            <li
              key={nav.id}
              className={`font-poppins font-medium cursor-pointer text-[16px] ${
                active === nav.title ? "text-white" : "text-secondary"
              }`}
              onClick={() => {
                setToggle(!toggle);
                setActive(nav.title);
              }}
            >
              <a href={`#${nav.id}`}>{nav.title}</a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  </div>
</nav>

); };

export default Navbar;

Any help will be appreciated

[akashkumargaur]

Working on link code depends on two factors. First navLink array in src/components/constant check id there and Second SectionWrapper export of every src/components means in export default of components mean code below export default SectionWrapper(About, "about") check the spelling of the string inside " " and the string of the nav link array id export const navLinks = [ { id: "about", title: "About", }, { id: "work", title: "My Education", }, { id: "contact", title: "Contact", }, { id: "resume", title: "resume", }, ];