Inicjowanie rekwizytów w obrębie stanu (React.js)

Próbuję utworzyć suwak obrazu za pomocą pakietu reaguj-slick. Jednak chcę, aby był to komponent wielokrotnego użytku i nie musiał tworzyć komponentu suwaka dla każdej strony. Tak więc próbowałem napisać to za pomocą rekwizytów i stanów, ale nadal nie mogę go uruchomić. Mój problem polega na tym, że nie wiem, jak włączyć rekwizyty do stanu, jeśli jest to w ogóle możliwe. Górny blok jest moim problemem, ponieważ wiem, że nie czyta rekwizytów. Próbuję uzyskać dane z innego komponentu obrazu, który pobiera adres URL obrazu na mojej stronie głównej.

class ImageCarousel extends React.Component {
    constructor(props){
        super(props);
    state = {
        images: [
            {url: {props.url1}},
            {url:{props.url2}},
            {url:{props.url3}},
            {url:{props.url4}} 
        ]
    }
    }
    render(){


        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true,
            className: "slides"
          };
          return(
            <div className='ImageCarousel' style={{padding:30}}>
                <Slider {...settings}>
                <div>
                    {this.state.images[0].url}
                </div>
                <div>
                    {this.state.images[1].url}
                </div>

                 <div>
                    {this.state.images[2].url}
                </div>
                <div>
                    {this.state.images[3].url}
                </div>
                </Slider>
            </div>
        )

    }
}

export default ImageCarousel;