I can't see my images

import React, { useEffect, useRef, useState } from "react";
import { ProvaSocialContainer, TextContainer, SlideImage } from "../styles/ProvaSocial.style";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import imagem1 from "../assets/antes-e-depois/1.png";
import imagem2 from "../assets/antes-e-depois/2.png";
import imagem3 from "../assets/antes-e-depois/3.png";
import imagem4 from "../assets/antes-e-depois/4.png";


const images = [
    {
        id: 1,
        src: imagem1,
      },
      {
        id: 2,
        src: imagem2,
      },
      {
        id: 3,
        src: imagem3,
      },
      {
        id: 4,
        src: imagem4,
      },
  ];
  
  const ProvaSocial = () => {
    const sliderSettings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
    };
  
    return (
      <ProvaSocialContainer>
        <TextContainer>
          <h3>Sem corte e sem cirurgia</h3>
          <p>Confira alguns resultados da clínica Anastásia Estética Avançada</p>
        </TextContainer>
        <Slider {...sliderSettings}>
        {images.map((image) => (
          <SlideImage key={image.id} src={image.src} alt={`Slide ${image.id}`} />
        ))}
      </Slider>
      </ProvaSocialContainer>
    );
  };
  
  export default ProvaSocial;