How to use react-spring animation with react-slick slider?

Question

I'm trying to make some animation to elements inside my carousel, it works only in the first carousel item but for the next item no animation happen, even in the first carousel item when it repeated no animation happen also. I tried to use CSS animation with react-bootsrap but it didn't work either. Below is my code :

import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import Slider from "react-slick";
import "./mainSlider.css";
import { useSpring, animated } from "react-spring";

const MainSlider = () => {
  const props = useSpring({
    to: { opacity: 1 },
    from: { opacity: 0 },
    // delay: 1000,
  });

  const settings = {
    dots: true,
    infinite: true,
    autoplay: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <Container fluid>
      <Row>
        <Col xs={12} className="px-0" style={{ overflow: "hidden" }}>
          <Slider {...settings}>
            <div>
              <div
                className="main_slider_item"
                style={{
                  backgroundImage: `url('/img/products_carousel/1_1512x.webp')`,
                }}
              >
                <animated.div style={props}>
                  I will fade in <h1>Slide1</h1>
                </animated.div>
              </div>
            </div>
            <div>
              <div
                className="main_slider_item"
                style={{
                  backgroundImage: `url('/img/products_carousel/6_1512x.webp')`,
                }}
              >
                <animated.div style={props}>
                  I will fade in <h1>Slide2</h1>
                </animated.div>
              </div>
            </div>
          </Slider>
        </Col>
      </Row>
    </Container>
  );
};

export default MainSlider;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>