Smooth scrolling react

Main.tsx

import React from "react";

function Main() {
  return (
    <div className="flex-1  overflow-auto scroll-smooth ">
      <section id="about" className="h-[100%] bg-pink-200"></section>
      <section id="skills" className="h-[100%] bg-pink-400"></section>
      <section id="projects" className="h-[100%] bg-pink-800"></section>
      <section id="interests" className="h-[100%] bg-gray-400"></section>
      <section id="certifications" className="h-[100%] bg-red-200"></section>
    </div>
  );
}

export default Main;

Navbar.tsx

import React, { useState } from "react";
import { Link } from "react-scroll";
import pfp from "../assets/pfp.png";
function Pfp() {
  return (
    <>
      <img
        src={pfp}
        className="rounded-flil max-w-flil w-[5rem]"
        alt="pfp"
        aria-label="pfp of tjsm"
      />
    </>
  );
}

function NavButton({ handleShow }: { handleShow: () => void }) {
  return (
    <button
      className="border box-content  xs:hidden border-[rgba(255,255,255,.1)] px-3 py-2 rounded-[0.25rem] transition duration-400  ease-in-out  hover:border-white focus:border-white"
      onClick={handleShow}
    >
      <div className="hamburger  flex flex-col gap-[0.4rem] justify-evenly">
        <div className="bar bg-[rgba(255,255,255,.5)] w-[1.4rem] rounded-md   h-[0.10rem] "></div>
        <div className="bar bg-[rgba(255,255,255,.5)] w-[1.4rem]  rounded-md   h-[0.10rem] "></div>
        <div className="bar bg-[rgba(255,255,255,.5)] w-[1.4rem]  rounded-md   h-[0.10rem] "></div>
      </div>
    </button>
  );
}

import { Link } from 'react-scroll';

function Navlist({
  navShow,
  handleShow,
}: {
  navShow: boolean;
  handleShow: () => void;
}) {
  return (
    <div>
      <ul>
        <li>
          <Link
            onClick={handleShow}
            to="about"
            spy={true}
            smooth={true}
            offset={-70}
            duration={500}
          >
            ABOUT
          </Link>
        </li>
        <li>
          <Link
            onClick={handleShow}
            to="skills"
            spy={true}
            smooth={true}
            offset={-70}
            duration={500}
          >
            SKILLS
          </Link>
        </li>
        {/* other list items */}
      </ul>
    </div>
  );
}


export default Navbar;