In my project, I listed map images through react carousel component and show its name in motion div to add some animation.

I have an problem about getting displayName value from map list.

When I remove motion.div, it works. It also works when I add this div during run time.

When I refresh the page, I get an error message.

Here is my error message shown below.

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.

How can I fix my issue?

Here is my MapList Component shown below.

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;