En mi proyecto, enumeré las imágenes del mapa a través del componente de carrusel de reacción y mostré su nombre en div de movimiento para agregar algo de animación.

Tengo un problema para obtener el valor de displayName de la lista de mapas.

Cuando elimino motion.div, funciona. También funciona cuando agrego este div durante el tiempo de ejecución.

Cuando actualizo la página, aparece un mensaje de error.

Aquí está mi mensaje de error que se muestra a continuación.

 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

¿Cómo puedo solucionar mi problema?

Aquí está mi componente MapList que se muestra a continuación.

 const MapList = () => { const { maps } = useContext(APIContext); const [selected, setSelected] = useState(0); const handleChange = (selectedIndex) => { setSelected(selectedIndex); }; useEffect(()=>{ handleChange(selected) }, [selected]) const variants = { show: { opacity: 1, y: 0, transition: { ease: "easeOut", duration: 0.5, }, }, hide: { y: 50, opacity: 0, }, }; return ( <div className={styles.mapList}> <Carousel infiniteLoop showStatus={false} showThumbs={false} dynamicHeight={false} swipeable={true} onChange={handleChange} > {maps?.map((map, index) => ( <img className='carouselImage' src={map.splash} alt='carouselImage' key={index}></img> ))} </Carousel> <motion.div className={styles.mapInfo} key={selected} variants={variants} animate={"show"} initial="hide" > <p className={styles.mapName}>{maps?.[selected].displayName}</p> </motion.div> </div> ) } export default MapList;