How to use Css selector correctly at react-slick?

Question

I am using react-slick library, but when the third element of li is activated as above code, I want to give animation to the first element, but it doesn't work at all. What's wrong?

//JSX section

<StyledSlider {...settings}>
            {rendingData.map((obj)=> 
                  <SlideCard
                    key={obj.id}
                    src={obj.src}
                    title={obj.title}
                    description={obj.description}
                    titleStyle={obj.titleStyle}
                    descriptionStyle={obj.descriptionStyle}
                  />
            )}
        </StyledSlider>

//styled Component section

.slick-dots li:nth-child(3).slick-active ~ li:nth-child(1) {
        animation: ${move1to3} .5s forwards;
    }