So i tried to make a component here that needs to reference from the parent element
This is the component

import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
import { useEffect, useState } from 'react';

export default function CarouselNavigation({
  carousel,
}: {
  carousel: HTMLDivElement;
}) {
  let scroll = (dir: number) => {
    let style = window.getComputedStyle(carousel);
    carousel.scrollBy({
      left:
        dir *
        (carousel.clientWidth -
          parseInt(style.paddingLeft, 10) -
          parseInt(style.paddingRight, 10) +
          parseInt(style.columnGap, 10)),
      behavior: 'smooth',
    });
  };

  let [isPrevDisabled, setPrevDisabled] = useState(true);
  let [isNextDisabled, setNextDisabled] = useState(false);

  useEffect(() => {
    let update = () => {
      setPrevDisabled(carousel.scrollLeft <= 0);
      setNextDisabled(
        carousel.scrollLeft >= carousel.scrollWidth - carousel.clientWidth
      );
    };

    update();

    if ('onscrollend' in document) {
      carousel.addEventListener('scrollend', update);
      return () => carousel.removeEventListener('scrollend', update);
    } else {
      carousel.addEventListener('scroll', update);
      return () => carousel.removeEventListener('scroll', update);
    }
  }, [carousel]);

  return (
    <div className='flex justify-end gap-2'>
      <button
        className='...'
        aria-label='Previous Page'
        disabled={isPrevDisabled}
        onClick={() => scroll(-1)}
      >
        <ChevronLeftIcon className='h-5 w-5' />
      </button>
      <button
        className='...'
        aria-label='Next Page'
        disabled={isNextDisabled}
        onClick={() => scroll(1)}
      >
        <ChevronRightIcon className='h-5 w-5' />
      </button>
    </div>
  );
}