¿How can I stop re render a carousel component when the props doesnt change?

Question

I have an issue that I'cant resolve. In summary, I am working on an application in which one person generates a payment and receives a pdf for each uploaded passport (you can upload several). Those pdf's are rendered in a carousel. In the same application, there is another search tab that does not refresh the web, everything remains as it is until the reload. That is, if you change the tab, the web is not reloaded. The only problem is the carousel, I can't stop it from re-rendering. The useeffect is always being executed again, no matter what I do. I tried everything, memos, usecallback, changing array dependencies, etc. Could you help me?

1st step: Loading passports data 2 step: Payment with stripe and sending info to the api 3 step: This payment generates an ID that is used to fetch the pdfs from the api 4th step: The carousel is rendered

This is the code and images. Sorry por my bad english, I'm using a translator help.

import { Grid, Box,Typography} from '@mui/material';
import React, {useContext, useState, useEffect} from 'react';
import { Tutorial } from '../Tutorial/Tutorial';
import {QrCarrousel} from '../QrCarrousel/QrCarrousel';
import { PaymentContext } from '../../context/PaymentContext';
import { getPdfFromHashId } from '../PayWithCreditCard/PostFunctions'
import { Loader } from '../Loader/Loader';

export const PresentTheQR = () => {
  const {paymentData } = useContext(PaymentContext) 
  const [pdfUrls, setPdfUrls] = useState([])
  const [downloadUrl, setDownloadUrl] = useState()
  const [loading, setLoading] = useState(false)

  const getBlobFromHashId = (hashId) => {
    getPdfFromHashId(hashId)
    .then(response => response.data
    )
    .then(blob => {  
    const url = window.URL.createObjectURL(new Blob([blob])) 
    setPdfUrls(prev => ([...prev,url]))
    })   
   .catch (error => console.log("Error", error)) 
  };

  const downloadPdfs = (hashId) => {
    const requestOptions = {
      method: 'GET',
      responseType: 'blob',
      headers: {'Content-Type': 'application/pdf'},
    }
    try {
      const res = fetch(`https://dt-backoffice.greenflame.com.ar/api/v1/receipt?api_key=API_TEST_KEY_09876543210987654321&hash_id=${hashId}`, requestOptions)
      .then(response => response.blob())
      .then(blob => {
      const url = window.URL.createObjectURL(blob) 
      setDownloadUrl(url)
      })
        
    } catch (error) {
      console.log("Error", error);
    }
  };

  useEffect(() => {
    setLoading(true)
    downloadPdfs(paymentData.hash_id)
    paymentData.visitors.map(visitor =>{
      return getBlobFromHashId(visitor.hash_id)
    })
    setLoading(false)
  }, [paymentData.hash_id, paymentData.visitors])

  /* console.log("actualizado estado de array*************",pdfUrls) */

    
  return (
    <Grid container columns={{ xs: 1, lg: 2 }}>
      <Grid item xs={1} lg={1}>
        <Tutorial/>
      </Grid>
      <Grid item xs={1} lg={1} mt={'40px'} paddingLeft={{ xs:'0', lg:'55px' }} >
          <Box display={'flex'} alignItems={'center'} flexDirection={'column'}>
            <Typography color={'#4B72FF'} fontSize={'36px'} fontWeight={'700'}>Congratulations!</Typography>
            <Typography color={'#112211'} fontSize={'24px'} fontWeight={'700'}>Your Departure Tax is ready</Typography>
          </Box>
          <Box display={'flex'} justifyContent={'center'} mt={'30px'}>
            {loading 
            ? 
            <Loader text={"Your payment was successfull!. We are loading your receipts."} />

            : <QrCarrousel pdfUrls={pdfUrls} downloadUrl={downloadUrl}/>
            }
          </Box>
      </Grid>
  </Grid>
  );
};

import {React} from "react";
import { Button, Grid, Link } from "@mui/material";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import './customCarrousel.css';
import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
import { downloadButton } from "../../styles/customComponents";
import "../../styles/custom.css"

export const QrCarrousel = ({pdfUrls, downloadUrl}) => {
  const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 0 },
      items: 1,
      slidesToSlide: 1
    },
  };
  /* console.log("desde el carrousellllll----",pdfUrls) */

  return (
    <Grid container columns={{ xs: 1, lg: 1 }} justifyContent={'center'}>
      <Grid item xs={1}>
        <Carousel 
          arrows={false}
          draggable={true}
          swipeable={true}
          showDots={true}
          responsive={responsive}
          infinite={false}
          keyBoardControl={false}
          containerClass="carousel-container"
          dotListClass="custom-dot-list-style"
          itemClass="carousel-item-padding-40-px"
        >
          {
            pdfUrls&&
            pdfUrls.map((url, index) => (<Viewer fileUrl={url}/>))
          }
        </Carousel>
      </Grid>
      <Link sx={{color:'#fff'}} href={downloadUrl} target="_blank" rel="noopener noreferrer">
        <Button startIcon={<DownloadForOfflineIcon sx={{color:'#fff'}}/>} sx={{...downloadButton, mt:'15px'}}> 
        Download
        </Button>
      </Link>
  </Grid>
  )
}

[Picture 1][1]
[Picture 2][2]
[Picture 3][3]