Don`t see the next section of page after the fixed slider in NextJs

I have a NextJs component Slider
which is responsible for the fact that when scrolling, the lower section “runs over” the upper section and overlaps it. Here is code:

"use client"

import { useEffect, useState } from 'react';
import UploadSlider from "./UploadSlider";
import RecommendedCandiates from './RecommendedCandiates';
import WorkWithAI from './WorkWithAI';
import UseSupport from './UseSupport';
import FreeVacancy from './FreeVacancy';

const sections = [
    <UploadSlider key="upload-slider" />,
    <RecommendedCandiates key="recommended-candidates" />,
    <WorkWithAI key="work-with-ai" />,
    <UseSupport key="use-support" />,
    <FreeVacancy key="free-vacancy" />
  ];
  
  const Slider = () => {
  const [currentSection, setCurrentSection] = useState(0);
  const [hasStartedSliding, setHasStartedSliding] = useState(false);

  const startedSlidingHandler = (scrollPosition, triggerHeight) => {
    const sectionHeight = window.innerHeight;
    const newSection = Math.min(
    sections.length - 1,
      Math.floor((scrollPosition - triggerHeight / 2.3) / sectionHeight)
    );
    if (newSection !== currentSection) {
      setCurrentSection(newSection);
    }
  }
  
  const handleScroll = () => {
    const scrollPosition = window.scrollY;
    const triggerHeight = document.getElementById('sliding-sections').offsetTop;

    if (scrollPosition >= triggerHeight && !hasStartedSliding) {
      setHasStartedSliding(true);
    }

    if (hasStartedSliding) {
      startedSlidingHandler(scrollPosition, triggerHeight);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [currentSection, hasStartedSliding]);

  return (
    <>
      <div id="sliding-sections" className="relative">
        <div  style={{height: `${sections.length * 100}vh `}}>
          <div className="min-h-screen">
            {sections[0]}
          </div>
        </div>

        {sections.slice(1).map((section, index) => (
          <div
            key={index + 1}
            className={`fixed top-0 w-full h-full transition-transform duration-1000 ease-in-out transform ${
              hasStartedSliding && currentSection >= index + 1 ? 'translate-y-0' : 'translate-y-full'
            }`}
          >
            {section}
          </div>
        ))}
      </div>
    </>
  );
};

export default Slider;

But the problem I have is that when I place another section under this component on the same page, it is not visible because the slider covers its content.
As far as I understand, this is due to the fact that I define fixed top-0 for the sections in the slider.

Here is page.js code

import EmployerHeader from "@/components/employer/EmployerHeader";
import MainSection from "@/components/employer/MainSection";
import ResumeBase from "@/components/employer/ResumeBase";
import Slider from "@/components/employer/sliders/Slider";
import Reviews from "@/components/employer/Reviews";

export default function Home() {
    return(
        <div className="w-full">
            <EmployerHeader />
            <MainSection />
            <ResumeBase />
            <Slider />
            <Reviews />   
        </div>
    )
}

In my case the Reviews section hides under the Slider component

If I change fixed to absolute, scrolling stops working for me. How can I fix this?