cannot click on items on slick slider carousel with Nextjs

Question

I have the following react-slick carousel on Nextjs project. It looks like there is a wall on top of the carousel--I cannot click on Image, Link or anything. I even tried other libraries such as react-owl-carousel and I got the same issue.

I tried to add z-index but it didn't work for me. This is the Slider component:

"use client";
import React from "react";
import Slider from "react-slick";
import Slide from "../Slide/page";
import { useSelector } from "react-redux";
const MealSlider = () => {
  const allMeals = useSelector((state) => state.meals.data);
  const mealsToShow= [];
  for (let i in allMeals) {
    mealsToShow.push({
      id: allMeals[i].id,
      title: allMeals[i]?.title,
      imageUrl: allMeals[i]?.imageUrl[0],
      mealRating: allMeals[i]?.mealRating,
      flag: allMeals[i]?.flag,
      calories: allMeals[i]?.calories,
      servings: allMeals[i]?.servings,
      duration: allMeals[i]?.duration,
      ingredients: allMeals[i]?.ingredients,
    });
  }
  meals.sort(function (a, b) {
    return b.mealRating - a.mealRating;
  });


  const setting = {
    dots: true,
    infinite: true,
    slideToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    pauseOnHover: false,
  };
  return (
    <div>
      <Slider {...setting}>
        {mealsToShow.map((item, index) => (
          <Slide
            key={index}
            id={item.id}
            title={item.title}
            image={item.imageUrl}
            flag={item.flag}
            calories={item.calories}
            servings={item.servings}
            duration={item.duration}
            ingredients={item.ingredients}
          />
        ))}
      </Slider>
    </div>
  );
};

export default MealSlider;

and this is the Slide componenet

import Image from "next/image";
import React from "react";
import Flag from "react-world-flags";
import { GiTimeBomb, GiPowerLightning, GiChefToque } from "react-icons/gi";
import { IoIosPeople } from "react-icons/io";
import styles from "../UI/Card/Card.module.css";
import Link from "next/link";

const Slide = ({
  image,
  title,
  flag,
  calories,
  servings,
  duration,
  ingredients,
  id,
  mealRating,
}) => {
 
  return (
    <div className=" bg-gray-100 rounded-lg">
      <div className="flex p-4">
        <div className="slider_image bg-white">
          <Image
            className="p-2 "
            src={image}
            alt={title}
            width={500}
            height={400}
          ></Image>
        </div>
        <div className="flex-1 flx justify-center ">
          <h3 className="text-primary mt-5 font-bold text-base text-center">
            {title}
          </h3>
          <div className="bg-white mt-6 rounded-md mx-2 flex justify-between px-2 items-center">
            <Flag code={flag} height="16" fallback={<span>{}</span>} />

            <div className="flex hover:underline justify-between items-center">
              <h6 className="mr-1">
                {"السعرات الحرارية : "}
                {calories}
              </h6>
              <GiPowerLightning style={{ color: "#ed6109" }} />
            </div>
            <div className="flex hover:underline justify-between items-center">
              <h6 className="mr-1">
                {"الافراد : "}
                {servings}
              </h6>
              <IoIosPeople style={{ color: "#ed6109" }} />
            </div>
            <div className="flex hover:underline justify-between items-center">
              <h6 className="mr-1">
                {" وقت الطهي : "}
                {duration}
              </h6>
              <GiTimeBomb style={{ color: "#ed6109" }} />
            </div>
          </div>
          <div className="p-6 mt-10 rounded-lg mx-2 flex justify-center items-center">
            <h4 className={`${styles.ingredients} text-center`}>
              {ingredients}
            </h4>
          </div>
          <div className="flex justify-center cursor-pointer">
            <Link
              className="bg-primary px-6 py-2 rounded-md text-white no-underline hover:bg-accent hover:text-gray-50"
              href={`/showRecipe/${id}`}
            >
              المزيد
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Slide;

any help will be appreciated