Can't get Pagination and Navigation modules of Swiper to work on React app

Question

I'm having trouble getting the Swiper modules Navigation and Pagination to work in a React App. I have an element Swipper.js and I'm trying to create a slide inside.

Here's my code :

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Navigation } from 'swiper/modules';
import './Swipper.css';
import 'swiper/css'

const Swipper = () => {
  
  const fotos = [
    {id: '1', image: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'},
    {id: '2', image: 'https://images.pexels.com/photos/1813922/pexels-photo-1813922.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'},
    {id: '3', image: 'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'},
    {id: '4', image: 'https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'}
  ]

  return (
    <div className="container">
      <Swiper
        modules={[Navigation, Pagination]}
        slidesPerView={2}
        pagination={{clickable:true}}
        navigation
        scrollbar={{draggable:true}}
      >
        {fotos.map((foto) => (
          <SwiperSlide key={foto.id}>
            <img src={foto.image} alt="Foto de um dos nossos colaboradores" className='slide-item' />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  )
}

export default Swipper

The slide works fine, but there are no slide buttons nor pagination buttons, and I'd like my app to have them.

I have installed swiper modules Pagination and Navigation with npm.

Versions I'm using:

• npm: 10.2.4
• swiper: 11.0.7

Can someone please tell me what I'm doing wrong?

P.S.: some variables and image alt are in Portuguese because I'm Brazilian, don't mind them.

I tried reading the documentation and asking ChatGPT, but I get error after error either way