How to scroll to the main component on backpress in Next JS using Links?

Here is what I want to achieve. I have few components that I have embedded in my layout. The sidebar is component is mapping through the Links to display links. When i click on the link, I move to that component on the same page. From there if i click on other component a few time, on pressing back button, I follow the whole breadcrumb of how I reached to that component. I’ve tried setting scroll behavior to true, which is its default value, but nothing seems to be working. Here is the code.

"use client"
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import Link from "next/link";
import BackToDefault from '@/components/default';

type MyComponentProps = {
  name: string;
  icon: IconProp;
  link: string;
  // Add more props as needed
};

const NavLinks = (props:MyComponentProps) => {

  return (
    <Link href={props.link} scroll={true} >
    <div  className="flex w-full h-10 group pl-2 hover:cursor-pointer  hover:bg-gray-300 items-center relative transition-transform duration-300 hover:transform hover:scale-95 hover:shadow-lg">
    {/* Hidden div */}
    <div className="absolute top-0 left-0 w-[2px] h-full  bg-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  
    {/* Icon */}
    <FontAwesomeIcon icon={props.icon} className=" w-1/4 flex justify-end " style={{ fontSize: '1.5em', color: 'rgb(59 130 246)'  }} />
   
    {/* Text */}
    <span className=" text-sm  ml-2 text-black">{props.name}</span>
     
   </div>
   
   </Link>
  )
}

export default NavLinks