Difficulty setting the React Slick Carousel arrow size

Question

I am developing a website for my client and I am using React Slick Carousel for testimonials. I want to increase the size of the carousel arrows, but its not working.

Can any one mention the property name I can use? I have browsed the internet, but didn't find anything valuable.

I am using Lucid React icons for the arrows (chevrons) and the Lucid icon's size property is also not working.

    import React from "react";
    import Slider from "react-slick";
    import "slick-carousel/slick/slick.css";
    import "slick-carousel/slick/slick-theme.css";
    import { ChevronLeft, ChevronRight } from "lucide-react";
    import UserAvatar from "../assets/UserAvatar.png";
    
    const ATCarousel = () => {
      const settings = {
        className: "center",
        centerMode: true,
        infinite: true,
        centerPadding: "30px",
        slidesToShow: 3,
        speed: 500,
    
        nextArrow: <ChevronRight color="black" />,
        prevArrow: <ChevronLeft color="black" />,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 3,
              infinite: true,
              dots: true,
            },
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2,
              initialSlide: 2,
            },
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
            },
          },
        ],
      };
    
      const data = [
        {
          name: `Sean Fisher`,
          designation: `CEO - Switch it`,
          img: UserAvatar,
          review: `Working with Amar-Tech was the best decision I made for my Business. Their dedication & support is remarkable. I rate them as a 5-Star Software Development Company.`,
        },
        {
          name: `Willie Brow`,
    
          designation: `Head of Product`,
    
          img: UserAvatar,
    
          review: `I need Project Teams from time to time and Amar-Tech has always helped me with this. I am satisfied and would highly recommend their services.`,
        },
        {
          name: `Jannet Morirs `,
          designation: `Designer`,
    
          img: UserAvatar,
    
          review: `I need Project Teams from time to time and Amar-Tech has always helped me with this. I am satisfied and would highly recommend their services.`,
        },
      ];
    
      return (
        <div className="w-3/4 m-auto">
          <div className="mx-1">
            <Slider {...settings}>
              {data.map((d) => (
                <div key={d.name} className="text-black flex flex-col px-4  py-4">
                  <div className=" bg-[#053F74]  p-8  rounded-xl h-[250px] py-8">
                    <div className="flex flex-col md:flex-row items-center justify-start ">
                      <img
                        src={d.img}
                        alt=""
                        className="h-12 w-12 lg:h-16 lg:w-16 rounded-full mx-4 bg-white p-2"
                      />
                      <div>
                        <h5 className="text-sm">{d.name}</h5>
                        <p className="text-xs">{d.designation}</p>
                      </div>
                    </div>
    
                    <div className="flex flex-col items-center justify-center gap-4 p-4">
                      <p className="text-balance text-xs ">{d.review}</p>
                    </div>
                  </div>
                </div>
              ))}
            </Slider>
          </div>
        </div>
      );
    };
    
    export default ATCarousel;