Scroll right and left on click NextJs

I am using NextJs and i am trying to scroll horizontally using on button click. below my code

this is the page where i want to scroll the products menu horizontally.

"use client";
import React, { useRef } from "react";
import { PRODUCTS } from "@/data/products";
import ProductCard from "../components/ProductCard/page";
import BrandCard from "../components/BrandCard/page";
import { GrNext, GrPrevious } from "react-icons/gr";
const Index = () => {
  const slideRef = useRef();

  const onNext = () => {
    slideRef.current.scrollLeft += 200;
  };
  const onPrev = () => {
    slideRef.current.scrollLeft += 200;
  };
  return (
    <div className="flex m-auto rounded-md flex-col">
      <div className="flex flex-col w-full items-center bg-red-50">
        <div>
          <h2 className="mb-4 font-bold text-2xl text-slate-400">
            Latest Products
          </h2>
          <div className="flex gap-4">
            <button onClick={onPrev}>
              <GrPrevious />
            </button>
            <button onClick={onNext}>
              <GrNext />
            </button>
          </div>
        </div>
        <div
          className=" flex gap-5 overflow-scroll scrollbar-none scroll-smooth transition-all"
          ref={slideRef}
        >
          {PRODUCTS &&
            PRODUCTS.map((item) => (
              <ProductCard
                id={item.id}
                imageUrl={item.imageUrl}
                price={item.price}
                description={item.description}
              />
            ))}
        </div>
        <div>
          <BrandCard />
        </div>
      </div>
    </div>
  );
};

export default Index;

and the is the child component ProductCard

import React from "react";
import { PRODUCTS } from "@/data/products";
import Link from "next/link";
import Image from "next/image";

const ProductCard = () => {
  return (
    <div className="flex items-center justify-center gap-4">
      {PRODUCTS.map((item) => (
        <div className="flex flex-col gap-1">
          <div className=" h-[200px] w-52 bg-white  flex justify-center">
            <Link className="" href={`./productDetails/:${item.id}`}>
              <Image
                src={item.imageUrl}
                // layout="fill"
                // objectFit="cover"
                width={500}
                height={500}
                className="h-full w-full"
              />
            </Link>
          </div>
          <Link href={`./productDetails/:${item.id}`}>
            <p className="bg-white text-center text-accent text-base font-bold">
              {item.price} $
            </p>
            <p className="bg-white text-center text-base font-semibold">
              {item.description}
            </p>
            <button className="bg-accent p-4 w-full rounded-b-lg text-white text-center -text-base font-semibold">
              Add To Cart
            </button>
          </Link>
        </div>
      ))}
    </div>
  );
};

{
  /* <View>
  <View style={styles.cardView}>
    <TouchableOpacity
      onPress={() => {
        navigation.navigate("ProductDetails", {
          itemId: item.id,
          catId: item.categoryId,
          productTitle: item.title,
        });
      }}
      style={styles.imageView}
    >
      <Image style={styles.image} source={{ uri: item.image }} />
    </TouchableOpacity>
    <TouchableOpacity
      onPress={() => {
        navigation.navigate("ProductDetails", {
          itemId: item.id,
          catId: item.categoryId,
          productTitle: item.title,
        });
      }}
      style={styles.priceView}
    >
      <View>
        <Text style={styles.price}> ج.م {item.price}</Text>
      </View>
      <View style={styles.priceView}>
        <Text style={styles.description}>{item.description}</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity
      onPress={() => {
        !authUser
          ? setModalVisible(true)
          : dispatch(cartActions.addToCart(item, 1));
      }}
      style={styles.addToCartView}
    >
      <Text style={styles.renderAddToCart}>اضف للسلة</Text>
    </TouchableOpacity>
  </View>
</View>; */
}
export default ProductCard;

I a have searched a lot to check this code, i found that it is working fine in react applications, but not with Nextjs