href link using last value in react-slick slider

Question

I'm trying to use my button to download different pdf file. The issue is that it's always using the last pdf string (see code).

I've tried adding key to the link but it still didnt work.

I'm using the following Packages @chakra-ui/react, react-slick

Carousel.tsx

const settings = {
    dots: true,
    arrows: false,
    fade: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
};

export function Carousel() {
    const [slider, setSlider] = React.useState<Slider | null>(null);
    const top = useBreakpointValue({ base: '90%', md: '50%' });
    const side = useBreakpointValue({ base: '30%', md: '40px' });

    return (
        <Box
            w={'full'}
            h={'100vh'}
            overflow={'hidden'}>
            <link
                rel="stylesheet"
                type="text/css"
                charSet="UTF-8"
                href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
            />
            <link
                rel="stylesheet"
                type="text/css"
                href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
            />
            <IconButton
                aria-label="left-arrow"
                variant="ghost"
                position="absolute"
                left={side}
                top={top}
                transform={'translate(0%, -50%)'}
                zIndex={2}
                onClick={() => slider?.slickPrev()}>
                <BiLeftArrowAlt size="40px" />
            </IconButton>
            <IconButton
                aria-label="right-arrow"
                variant="ghost"
                position="absolute"
                right={side}
                top={top}
                transform={'translate(0%, -50%)'}
                zIndex={2}
                onClick={() => slider?.slickNext()}>
                <BiRightArrowAlt size="40px" />
            </IconButton>
            <Slider {...settings} ref={(slider) => setSlider(slider)}>
                <Slide
                    index={0}
                    title={"Heckenried Meggen"}
                    text={"The project board is an exclusive resource for contract work. It's perfect for freelancers, agencies, and moonlighters."}
                    image={'/img/2003_Heckenried_Meggen.jpg'}
                    pdf={'2003_Heckenried_Meggen.pdf'}
                />
                <Slide
                    index={1}
                    title={"Design Projects 2"}
                    text={"The project board is an exclusive resource for contract work. It's perfect for freelancers, agencies, and moonlighters."}
                    image={'https://images.unsplash.com/photo-1438183972690-6d4658e3290e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2274&q=80'}
                    pdf={'2006_Wilstrasse_Dübendorf.pdf'}
                />
                <Slide
                    index={2}
                    title={"Design Projects 3"}
                    text={"The project board is an exclusive resource for contract work. It's perfect for freelancers, agencies, and moonlighters."}
                    image={"https://images.unsplash.com/photo-1507237998874-b4d52d1dd655?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60"}
                    pdf={'2008_VKU_Flughafen.pdf'}
                />
            </Slider>
        </Box>
    );
}

Slide.tsx

interface SlideProps {
    index: number,
    image: string,
    title: string,
    text: string,
    pdf: string
}
export const Slide = ({ index, image, title, text, pdf }: SlideProps) => {
    const path = '/pdf/' + pdf;
    return (
        <Box
            key={index}
            height={'6xl'}
            position="relative"
            backgroundPosition="center"
            backgroundRepeat="no-repeat"
            backgroundImage={`url(${image})`}>
            <Container size="container.lg" height="full" position="relative">
                <Stack
                    spacing={6}
                    w={'full'}
                    maxW={'lg'}
                    position="absolute"
                    top="50%"
                    transform="translate(0, -50%)">
                    <Heading fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}>
                        {title}
                    </Heading>
                    <Text fontSize={{ base: 'md', lg: 'lg' }} color="GrayText">
                        {text}
                    </Text>
                    <Link href={path}>
                        <Button>Download PDF</Button>
                    </Link>
                </Stack>
            </Container>
        </Box>
    )
}

The other values get adapted when I change the slide. Only the href remains constant.

SOLUTION: There seems to be a bug with the fade setting for the slider, if you remove it, it will be working fine.