How do I make tailwind scroll snap & smooth scroll work together in React?

Question

I am trying to build a single page react app and I was wondering how I would apply tailwind scroll snap and smooth scroll together. Every time I enable scroll-snap in the y-direction, my code for smooth scroll no longer works. I'm a beginner to React so any help would be greatly appreciated. Below I have attached the app.jsx, the header, and the first component.

This is the closest stackoverflow post I've found: Making smooth anchor tag scrolling compatible with scroll snapping

import React from "react";
import Header from "./components/Header"
import First from "./components/First";
import Second from "./components/Second";
import Third from "./components/Third";

function App() {
  return (
    <div className="overflow-y-auto snap-y snap-mandatory h-[100vh] w-[100%]">
      <Header />
      <First />
      <Second />
      <Third />
    </div>
  );
}

export default App;

import React from "react";

const First = () => {
  return (
    <div
      className="w-full h-screen flex justify-center items-center bg-blue-400 snap-center"
      link="first"
    >
      First
    </div>
  );
};

export default First;

import React, { useState } from "react";
import { FaBars, FaTimes } from "react-icons/fa";
import { Link } from "react-scroll";

const Header = () => {
  const [nav, setNav] = useState(false);

  const links = [
    {
      id: 1,
      link: "first",
    },
    {
      id: 2,
      link: "second",
    },
    {
      id: 3,
      link: "third",
    },
  ];

  return (
    <div className="flex justify-between items-center w-full h-20 px-4 text-white bg-black fixed">
      <div>
        <h1 className="text-5xl font-signature ml-2">Practice Youtuber Tutorial</h1>
      </div>

      <ul className="hidden md:flex">
        {links.map(({ id, link }) => (
          <li
            key={id}
            className="px-4 cursor-pointer capitalize font-medium text-gray-500 hover:scale-105 duration-200"
          >
            <Link to={link} smooth duration={500}>
              {link}
            </Link>
          </li>
        ))}
      </ul>

      <div
        onClick={() => setNav(!nav)}
        className="cursor-pointer pr-4 z-10 text-gray-500 md:hidden"
      >
        {nav ? <FaTimes size={30} /> : <FaBars size={30} />}
      </div>

      {nav && (
        <ul className="flex flex-col justify-center items-center absolute top-0 left-0 w-full h-screen bg-gradient-to-b from-black to-gray-800 text-gray-500">
          {links.map(({ id, link }) => (
            <li
              key={id}
              className="px-4 cursor-pointer capitalize py-6 text-4xl"
            >
              <Link
                onClick={() => setNav(!nav)}
                to={link}
                smooth
                duration={500}
              >
                {link}
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Header;

Answer 1

Add snap-y snap-mandatory to your global.css file

@layer base {
  html {
    scroll-snap-type: y mandatory;
  }
  body {
    overflow: scroll;
    scroll-snap-type: y mandatory;
  }
  .snap-center {
    scroll-snap-align: center;
  }
}

For every link you want to snap scroll, add snap-center to the className

Answer 2

smooth scroll use by adding the following code

import { Link, animateScroll as scroll } from "react-scroll";