react-router-dom

При переходе на товар X, отображается товар, при нажатии кнопки назад в браузере я выбираю товар Y. И в этот момент сначала отображается товар X, а через секунду уже товар Y. Как решить этот вопрос ? Чтобы при каждом переходе сначала предыдущий товар не отображался, а сразу выбранный товар ? Вот компонент где происходит переход:

import React from "react";
import i18n from "../18n";
import { Link } from "react-router-dom";

const ProductListShow = ({ data }) => {
  const currentLanguage = i18n?.language;

  return (
    <>
      <Link to={`/product/${data?.translations?.az?.name}/${data?.id}`}>
        <div className="products_card">
          <h6>{data?.category?.translations[currentLanguage]?.name}</h6>
          <p className="prod_name">
            {data?.translations[currentLanguage]?.name ||
              data?.translations?.az?.name}
          </p>

          <div className="product_img">
            <img src={data?.image?.image} alt="" />
          </div>
          <div className="prod_itself">
            <div className="prod_price">
              {data?.final_price ? (
                <div>
                  <p className="sale_price">
                    {data?.final_price} <span>₼</span>
                  </p>
                  <p className="first_price1">
                    <del>
                      {data?.price} <span>₼</span>
                    </del>
                  </p>
                </div>
              ) : (
                <p className="first_price">
                  {data?.price} <span>₼</span>
                </p>
              )}
            </div>
            <svg
             
            </svg>
          </div>
        </div>
      </Link>
    </>
  );
};

export default ProductListShow;

Я использую useParams для определения id товара А вот single page :

const SinglePage = () => {
  
  const { productName, id } = useParams();
  console.log(productName, id);

  const dispatch = useDispatch();
 


  const  productIDList= useSelector((state) => state.Data.productIDList);
  const  loaderTwo  = useSelector((state) => state.Data.loaderTwo);


  useEffect(() => {
    if (id) {
      // setLoading(true);
      dispatch(getProductIDList(id));
    }else{
      // dispatch(getProductIDList(proID_local));
    }
  }, [dispatch, id]);

  const [activeIndex, setActiveIndex] = useState(null);

  const handleClick = (i) => {
    setActiveIndex(i);
  };
  const handleImageClick = (image) => {
    setSliderItem(image);
  };

  const { t } = useTranslation();
 
  const imagesFromApi = useMemo(
    () => productIDList?.image || [],
    [productIDList?.image]
  );

  const [sliderItem, setSliderItem] = useState(imagesFromApi[0] || {});
  const [value, setValue] = useState(0);
  useEffect(() => {
    if (imagesFromApi.length > 0) {
      setSliderItem(imagesFromApi[0]);
    }
  }, [imagesFromApi]);

  const handlePrev = () => {
    let index =
      value <= imagesFromApi.length - 1 && value > 0 ? value - 1 : value;
    setValue(index);
    const slider = imagesFromApi[index];
    setSliderItem(slider);
    setActiveIndex(index);
  };

  const handleNext = () => {
    let index = value < imagesFromApi.length - 1 ? value + 1 : value;
    setValue(index);
    const slider = imagesFromApi[index];
    setSliderItem(slider);
    setActiveIndex(index);
  };

  const currentLanguage = i18n.language;