Overflow-x-hidden in the layour causes scrolling to specific div not to work with useRef in React

Question

The parent div (layout page) that renders a about-us page as a child has overflow hidden property

<div className="overflow-x-hidden w-full h-screen flex flex-col justify-between" >

<Link href={"/about-us"}>
  <div className="flex leading-8 hover:text-purpleheart-800 hover:underline">
   About US
  </div>
</Link>
 
 <div className="bg-white pt-16 lg:pt-28">
     <div className="">{children}</div>
  </div>

<div>

Now this is the page that needs scrolling when clicked on the div

/* eslint-disable */
"use client";
//--- Libraries ---
import React, { useRef } from "react";
import Image, { StaticImageData } from "next/image";

//--- Assets ---
import img1 from "../../../public/how_we_work/section_howwework.svg";
import rightArrow from "../../../public/how_we_work/right_arrow.png";

//--- Components ---
import Initiation from "./components/Initiation";
import Discovery from "./components/Discovery";
import Contact from "@/app/components/Contact";
import SupportDevelopment from "./components/SupportDevelopment";
import Development from "@/app/how-we-work/components/Development";
import ContactUs from "@/app/components/ContactUs";

export default function page() {
  const initiationRef = useRef<HTMLDivElement | null>(null);
  const discoveryRef = useRef<HTMLDivElement | null>(null);
  const developmentRef = useRef<HTMLDivElement | null>(null);
  const supportRef = useRef<HTMLDivElement | null>(null);

  const scrollToSection = (
    ref: React.RefObject<HTMLDivElement>,
    offset: number,
  ) => {
    const elementPosition = ref.current?.getBoundingClientRect()?.top ?? 0;
    const offsetPosition = elementPosition + window.pageYOffset - offset;

    window.scrollTo({
      top: offsetPosition,
      behavior: "smooth",
    });
  };

  const sections = [
    { label: "01. Initiation", ref: initiationRef },
    { label: "02. Discovery", ref: discoveryRef },
    { label: "03. Development", ref: developmentRef },
    { label: "04. Support", ref: supportRef },
  ];
  return (
    <div className="  w-full mt-12 lg:mt-24 flex flex-col gap-16 md:gap-24 lg:gap-44">
      <div className="mx-auto w-full max-w-[1600px] px-[40px] md:px-[80px] xl:px-[150px] grid md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 2xl:grid-cols-5 gap-6 md:gap-12 lg:gap-24 xl:gap-32 2xl:gap-48 items-top sm:items-top justify-center ">
        <div className="col-span-1 md:col-span-2 lg:col-span-2 xl:col-span-2 2xl:col-span-2 grid grid-rows-2 gap-1">
          <div className="cursor-pointer  grid gap-5 items-top -mt-36  md:-mt-20 lg:-mt-20 xl:-mt-20 2xl:-mt-20">
            {sections.map((section, index) => (
              <h6
                key={index}
                onClick={() => section.ref && scrollToSection(section.ref, 200)}
                className="group h-20 flex flex-row items-center justify-between font-medium text-lg text-md:text-2xl lg:text-2xl xl:text-3xl 2xl:text-3xl text-blackrock-950 border-solid border-b-2 border-blackrock-950"
              >
                {section.label}
                <Image
                  src={rightArrow as StaticImageData}
                  alt="illustration"
                  className="w-6 md:w-12 lg:w-12 xl:w-12 2xl:w-12 float-end transition-all duration-1000 ease-in-out group-hover:translate-x-2"
                />
              </h6>
            ))}
          </div>
        </div>
      </div>
      <div ref={initiationRef}>
        <Initiation />
      </div>
      <div ref={discoveryRef}>
        <Discovery />
      </div>
      <ContactUs
        title="Find out more about how Databetys Technologies can assist you during the discovery stage"
        btnText="Find out more"
      />
      <div ref={developmentRef}>
        <Development />
      </div>
      <div ref={supportRef}>
        <SupportDevelopment />
      </div>
      <div className="w-full bg-mercury-30 pt-[72px] sm:pt-[100px] lg:pt-[130px] 2xl:pt-[150px] pb-[72px] ">
        <Contact title="Want to know more about the project cost?" />
      </div>
    </div>
  );
}

Since the parent has overflow-x-hidden, the "scrollToSection" function malfunctions. How can we Resolve the issue? We need overflow-x-hidden as it helps with responsiveness. Used react-scroll that isn't working either