AnimatePresence component giving me a flicker issue?

[siamahnaf]

Hello, I am actually want to do with my nextjs application like this video-

Video_2023_10_22-2.webm

This is actually I found framer motion official website example.

And I create one component here-

import { useState } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";

//Data
import data from "./Data";

const Card = () => {
    //State
    const [selectedId, setSelectedId] = useState<string | null>(null);

    //Get data
    const getSelectedData = () => {
        return data.find((item) => item.id === selectedId);
    }

    return (
        <div className="mt-3 relative">
            <div className="grid grid-cols-4 gap-4">
                {data.map(item => (
                    <motion.div layoutId={item.id} onClick={() => setSelectedId(item.id)} className="cursor-pointer" key={item.id}>
                        <Image
                            src={item.image}
                            alt={item.title}
                            width={1200}
                            height={840}
                        />
                    </motion.div>
                ))}
            </div>
            <div
                className={`fixed top-0 left-0 bottom-0 right-0 bg-black z-30 bg-opacity-50 transition-all ${selectedId ? "visible opacity-100" : "invisible opacity-0"}`}
                onClick={() => setSelectedId(null)}
            />
            <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40">
                <AnimatePresence initial={false}>
                    {selectedId && (
                        <motion.div
                            layoutId={selectedId}
                            className="bg-red-600"
                            key={selectedId}
                        >
                            <Image
                                src={getSelectedData()?.image as string}
                                alt={getSelectedData()?.title as string}
                                width={1200}
                                height={840}
                                className="w-[500px]"
                            />
                            <motion.h5>{getSelectedData()?.title}</motion.h5>
                            <motion.h2>{getSelectedData()?.description}</motion.h2>
                            <motion.button onClick={() => setSelectedId(null)}>
                                close
                            </motion.button>
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>
        </div>
    );
};

export default Card;

And I am facing one flicker issue.

Video_2023_10_22-1.webm

Here flicker only shown on double click on a item. If I click first and close it, I am not seeing any flicker, if I click the same item for second time, I am seeing one flicker issues, it is getting bigger and closing. Please the video.

[siamahnaf]

Hello, Supporters!