Link anchor (#) in NextJS not scrolling to id, but when manually typed in the url it works NEXTJS 13

Question

I'm trying to make a single paged site where the navigations will scroll to a certain div or portion of the page. I searched the implementations but somehow it does not work when I click the link. The link is working because it changes color and changes the current address by adding the /#r to the current url when I click it, but the intended function does not.

This is the code of my navbar, I'm using nextjs 13

"use client";
import React from "react";
import Link from "next/link";
import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai";

const Navbar = () => {
  const [isVisible, setIsVisible] = React.useState(false);
  const [currActive, setCurrActive] = React.useState("r");

  const handleCurrentActive = (current) => {
    setCurrActive(current);
  };

  const handleVisibility = () => {
    setIsVisible((prev) => !prev);
  };

  const NavIcon = isVisible ? AiOutlineClose : AiOutlineMenu;

  return (
    <>
      <NavIcon
        onClick={handleVisibility}
        className={`${isVisible ? "text-wht" : "text-blk"} scale-105 z-10 fixed top-5 right-5`}
      />
      {isVisible && (
        <div
          className="fixed top-3.5 left-2/4 -translate-x-2/4 
                      cstm-flex-col flex-wrap p-3 gap-5 
                      font-ibm font-light text-sm text-gr1
                      bg-blk w-11/12 rounded-md shadow-xl"
        >
          <Link
            href="#r"
            scroll={false}
            onClick={() => handleCurrentActive("r")}
            className={`${currActive === "r" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#a_m"
            scroll={false}
            onClick={() => handleCurrentActive("a_m")}
            className={`${currActive === "a_m" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#t_s"
            scroll={false}
            onClick={() => handleCurrentActive("t_s")}
            className={`${currActive === "t_s" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#m_p"
            scroll={false}
            onClick={() => handleCurrentActive("m_p")}
            className={`${currActive === "m_p" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#h_m"
            scroll={false}
            onClick={() => handleCurrentActive("h_m")}
            className={`${currActive === "h_m" && "text-pnk3"}`}
          >
            holder
          </Link>
        </div>
      )}
    </>
  );
};

export default Navbar;

and this is currently one of the said portions of the page,

const Init = () => {
  return (
    <div id="r" className="h-screen">
      Init
    </div>
  );
};

export default Init;

Answer 1

I switched to regular anchor tags, if you have suggestions on how I can make the Link tag of nextjs to work with what I want to accomplish I highly appreciate it. I would like to fully utilize the optimizations that nextjs provides.