error Assignment to constant variable.

[rajak9930]

I'm getting a 'resign' error while using 'useRef'. The issue seems to be related to this code: ref={slider => (sliderRef = slider)}

import React, { useState, useEffect, useRef } from "react";

import { Link } from "react-router-dom";
import Slider from "react-slick";

const CustomersAry = [
  {
    id: "01",
    title: ` Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Quis ipsum suspendisse ultrices gravida. Risus
  commodo viverra maecena ssuspendisse ultrices gravida.`,
    name: "aaaaaa",
  },

  {
    id: "02",
    title: ` Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Quis ipsum suspendisse ultrices gravida. Risus
  commodo viverra maecena ssuspendisse ultrices gravida.`,
    name: "bbbbb",
  },

 ....
];

const Testimonial = () => {
  const sliderRef = useRef(null);
  const [slideIndex, setSlideIndex] = useState(0);
  const [updateCount, setUpdateCount] = useState(0);
  const [currentPage, setCurrentPage] = useState(0);

  let settings = {
    dots: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: true,

    afterChange: () => setUpdateCount(updateCount + 1),
    beforeChange: (current, next) => setSlideIndex(next),
  };

  return (
    <section className="section-area section-sp3 testimonial-wraper">
      <div className="container">
        <div className="heading-bx text-center">
          <h6 className="title-ext text-secondary">Testimonial</h6>
          <h2 className="title m-b0">
            See What Are The Customers <br />
            Saying About us
          </h2>
        </div>
        <div className="row align-items-center">
          <div className="col-lg-6 text-center">
            <div className="thumb-wraper">
              <img className="bg-img" src="/assets/images/shape.png" alt="" />
              <ul>
                <li data-member={1}>
                  <Link onClick={sliderRef.current?.slickGoTo(1)}>
                    <img src="/assets/images/pic1.jpg" alt="" />
                  </Link>
                </li>
                <li data-member={2} className>
                  <Link onClick={sliderRef.current?.slickGoTo(2)}>
                    <img src="/assets/images/pic2.jpg" alt="" />
                  </Link>
                </li>
                <li data-member={3} className="active">
                  <Link  onClick={sliderRef.current?.slickGoTo(3)}>
                    <img src="/assets/images/pic3.jpg" alt="" />
                  </Link>
                </li>
                <li data-member={4}>
                  <Link  onClick={sliderRef.current?.slickGoTo(4)}>
                    <img src="/assets/images/pic4.jpg" alt="" />
                  </Link>
                </li>
                <li data-member={5}>
                  <Link  onClick={sliderRef.current?.slickGoTo(5)}>
                    <img src="/assets/images/pic5.jpg" alt="" />
                  </Link>
                </li>
                <li data-member={6}>
                  <Link  onClick={sliderRef.current?.slickGoTo(6)}>
                    <img src="/assets/images/pic6.jpg" alt="" />
                  </Link>
                </li>
              </ul>
            </div>
          </div>
          <div className="col-lg-6">
            <div className="swiper-container testimonial-slide swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
              <Slider
               ref={slider=>{sliderRef=slider}}
                {...settings}
              >
                {CustomersAry.map((item) => {
                  return (
                    <div className="testimonial-bx" key={item.id}>
                      <div className="testimonial-content">
                        <p>{item.title}</p>
                      </div>
                      <div className="client-info">
                        <h5 className="name">{item.name}</h5>
                        <p>patient</p>
                      </div>
                      <div className="quote-icon">
                        <i className="fas fa-quote-left" />
                      </div>
                    </div>
                  );
                })}
              </Slider>
              <div className="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-fraction">
                <span className="swiper-pagination-current">{currentPage}</span>{" "}
                /{" "}
                <span className="swiper-pagination-total">
                  {CustomersAry?.length}
                </span>
              </div>
              <span
                className="swiper-notification"
                aria-live="assertive"
                aria-atomic="true"
              />
            </div>
          </div>
        </div>
      </div>

    </section>
  );
};

export default Testimonial;

[akiran]

use let instead of const for declaring ref

let sliderRef = useRef(null);