Slider is not working in modal in reactjs

Question

Getting an array of images (imageList) using prop and I mapped that array in a grid. I want to show a slider of same array of images in modal after clicking on any image of the grid (starting from the same image).when I click on an image just that image show up in modal but arrows don't work to move images left or right. I think issue is in currentSlide = {currentSlide} but don't know how to fix it. I have also tried OwlCarousel but that also don't work in my scenario.

// Modal component
function Modal({ onClose, imageList, selectedImage }) {
const [currentSlide, setCurrentSlide] = useState(0);

    const handleSlideChange = (direction) => {
        if (direction === 'right' && currentSlide < imageList.length - 1) {
            setCurrentSlide(currentSlide + 1);
        } else if (direction === 'left' && currentSlide > 0) {
            setCurrentSlide(currentSlide - 1);
        }
    };
    
    useEffect(() => {
        if (imageList && imageList.length > 0) {
            const initialSlide = selectedImage
            setCurrentSlide(initialSlide >= 0 ? initialSlide : 0);
        }
    }, [imageList, selectedImage]);
    
    return (
        <div className="modal-overlay">
            <div className="modal-content flex justify-center bg-mustard bg-opacity-75">
                <div className='cursor-pointer text-5xl font-light' onClick={() => handleSlideChange('left')}>
                    <TiChevronLeft />
                </div>
                <div currentSlide={currentSlide}>
                    {imageList.map((image, index) => (
                        <div key={index}>
                            <img
                                src={image.src}
                                className={image.className}
                                alt={`Image ${index + 1}`}
                            />
                        </div>
                    ))}
                </div>
                <div className='cursor-pointer text-5xl' onClick={() => handleSlideChange('right')}>
                    <TiChevronRight />
                </div>
                <button className="close-button" onClick={onClose}>
                    Close
                </button>
            </div>
        </div>
    );

}

// Images component
function Images({ imageList }) {
const \[isModalOpen, setIsModalOpen\] = useState(false);
const \[selectedImage, setSelectedImage\] = useState(null);

    const openModal = () => {
        setIsModalOpen(true);
    };
    
    const closeModal = () => {
        setIsModalOpen(false);
        setSelectedImage(null); // Clear selected image when closing modal
    };
    
    const handleImageClick = (image) => {
        setSelectedImage(image);
        openModal();
    };
    
    return (
        <div>
            <div className='mx-11'>
                <div className='grid grid-cols-3 gap-5'>
                    {imageList.map((image, index) => (
                        <div key={index}>
                            <img
                                src={image.src}
                                className={image.className}
                                alt={`Image ${index + 1}`}
                                onClick={() => handleImageClick(image)}
                            />
                        </div>
                    ))}
                </div>
            </div>
            {isModalOpen && <Modal onClose={closeModal} imageList={[selectedImage]} />}
        </div>
    );

}

export default Images;