Hi
i wrote this componnent:

import { Swiper, SwiperSlide } from 'swiper/react';
import Image from 'next/image';

//icons
import {BsArrowRight} from 'react-icons/bs';

//swiper style
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/pagination';

//required modules
import {Pagination} from 'swiper';

// testimonial data
const testimonialData = [
  {
    image: '/t-avt-1.png',
    name: 'Anne Smith',
    position: 'Customer',
    message:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum expedita odit beatae, cupiditate saepe quam officia aut placeat quas neque!',
  },
  {
    image: '/t-avt-2.png',
    name: 'Jane Doe',
    position: 'Customer',
    message:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum expedita odit beatae, cupiditate saepe quam officia aut placeat quas neque!',
  },
  {
    image: '/t-avt-3.png',
    name: 'Jhon Doe',
    position: 'Customer',
    message:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum expedita odit beatae, cupiditate saepe quam officia aut placeat quas neque!',
  },
];

const TestimonialSlider = () => {
  return (
    <Swiper 
      spaceBetween={10}
      pagination = {{
        clickable: true,
      }}
      modules={[Pagination]}
      className='h-[280px] sm:h-[480px]'
    >
      {testimonialData.map((persone, index) => {
        <SwiperSlide key={index}>
          <div>
            {/* avatar, name, position */}
            <div>
              {/* avatar */}
              <div>
                avatar
              </div>

              {/* name */}
              <div>
                name
              </div>

              {/* position */}
              <div>
                position
              </div>
            </div>
          </div>
        </SwiperSlide>
      })}
    </Swiper>
  )
};

export default TestimonialSlider;

and import it in index.js

//components
import TestimonialSlider from '../../components/TestimonialSlider';

const Testimonials = () => {
  return (
    <div className='h-full bg-primary/30 py-32 text-center'>
      <div className='container mx-auto h-full flex flex-col justify-center'>
        {/* title */}
        <h2 className='h2 mb-8 xl:mb-0'>
          What clients <span className='text-accent'>say.</span>
        </h2>

        {/* slides */}
        <div>
          <TestimonialSlider />
        </div>
      </div>
    </div>
  )
};

export default Testimonials;

but when i run my code my componnent didn't show anythig.

how can i fix it?