export 'Pagination' (imported as 'Pagination') was not found in 'swiper' (possible exports: Swiper, default)

I wanted to add the Pagination from swiper.
The import statement I used is import { Pagination } from "swiper";

My configuration:

The error i`m getting is :

I have seen at multiple places that its working fine but not sure why I`m encountering this issue.

Also on this stackflow article it say the same import statement as of aforementioned.

Create React App doesn't support pure ESM packages yet. It is still possible to use Swiper (7.2.0+) with it.

In this case we need to use direct file imports:

// Core modules imports are same as usual
import { Navigation, Pagination } from 'swiper/modules';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/swiper-react.mjs';

// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module

For reference : https://swiperjs.com/react#usage-with-create-react-app

Seems like earlier pagination would work using import { Pagination } from "swiper";.
But now its import { Pagination } from 'swiper/modules';
Just by adding /modules in my import statement fixed the issue.