Swiper JS in React Project

I have installed and imported swiper js.

I have the following data:

const data = [
  {
    avatar: me,
    name: 'abc',
    review: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam adipisci saepe porro optio necessitatibus nobis dolorum voluptates doloremque obcaecati dolorem!'
  },
  {
    avatar: me,
    name: 'xyz',
    review: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam adipisci saepe porro optio necessitatibus nobis dolorum voluptates doloremque obcaecati dolorem!'
  }]

I am trying to use swiper js for carousal.

<Swiper className="container testi_container">
        {
          data.map(({ avatar, name, review }, index) => {
            return(
              <SwiperSlide key={index} className='testimonial'>
              <div className="client_avatar">
                <img src={avatar} alt="" />
              </div>
              <h5 className='client_name'>{name}</h5>
              <small className='client_review'>{review}</small>
            </SwiperSlide>
            )
          })
        }
      </Swiper>

I get no output in the browser and the error in the console is : Uncaught TypeError: Cannot read properties of null (reading 'useState') img here