Keen slider doesn't work if I place it on a modal?

Hello, I am creating a next js application. I use keen slider in my several project. First of all Thanks to the all developer of keen slider. It is a amazing slider. But I am facing one problem when I place keen slider into a modal in my current project. Can you help me or is it an a serious issue?

Here is the modal component–

const Modals = ({ details, btnText, works, name, icon }) => {
    const [visible, setVisible] = useState(false);
    const modalToggler = () => {
        setVisible(!visible)
    }
    return (
        <Box>
            <ButtonBase onClick={modalToggler} >
                Open Modal
            </ButtonBase>
            <Rodal
                visible={visible}
                onClose={modalToggler}
            >
                <Typography variant="h5" component="h5">
                    {name}
                </Typography>
                // Carousel components
                <Carousels works={works} visible={visible} />
            </Rodal>
        </Box>
    );
};
export default Modals;

And this is the carousel component–

import { useState } from "react";
import { useKeenSlider } from "keen-slider/react";
import "keen-slider/keen-slider.min.css";

const Carousels = ({ works, visible }) => {
    const [currentSlide, setCurrentSlide] = useState(0)
    const [loaded, setLoaded] = useState(false)
    const [sliderRef, instanceRef] = useKeenSlider({
        initial: 0,
        slideChanged(slider) {
            setCurrentSlide(slider.track.details.rel)
        },
        created() {
            setLoaded(true)
        },
    })
    return (
        <div ref={sliderRef} className="keen-slider"> // Here I try it also `ref={visible ? sliderRef: null}` But not working
            {works &&
                works.map((work, i) => (
                    <div key={i} className="keen-slider__slide number-slide1">
                        <img src={work.image} />
                    </div>
                ))
            }
        </div>
    );
};
export default Carousels;

It just show a white screen. Not showing any carousel. But when I place it outside the modal then it works perfectly. What is the problem when I place it into modal.

Again thanks.

[siamahnaf198]

This is like amazing. Thank you very much @rcbyr .

Love from Bangladesh. A team of web development Code Station 21

[rcbyr]

You could do something like that (the version is 6.3.0) https://codesandbox.io/s/modest-wood-mkdsl?file=/Components/carousel.js