Problem with Next.js and the library Smooth-scrollbar

I was following this tutorial (https://dev.to/codebucks/implement-silky-smooth-scrolling-in-react-js-46fn) about making the scrollbar smoothly and I wanna apply to my personal website.

I am using Next.js and the library Smooth-Scrollbar (https://idiotwu.github.io/smooth-scrollbar/)

My problem is I wanna apply all my pages the smoothness when scrolling up and down, but I get an error. I literally copy paste the code from the author in Next.js and I have this error when I import the following import:

import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll';

I even try other way like using this library adapted to react (https://github.com/idiotWu/react-smooth-scrollbar). There is no error, but this doesn't apply the smooth-scrollbar to all my pages

Here's my code:

_app.js

import { ThemeProvider } from "@mui/material";
import lightTheme from "../styles/theme/lightTheme";
import "../styles/globals.css";
import "../styles/styles.css";
import "../styles/transition.css";
import Scrollbar from "react-smooth-scrollbar";

const MyApp = ({ pageProps, Component }) => {
  return (
    <ThemeProvider theme={lightTheme}>
      <Scrollbar>
        <Component {...pageProps} />
      </Scrollbar>
    </ThemeProvider>
  );
};

export default MyApp;

TestPage.js from /pages

const Events = () => {
  return (
    <>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
    </>
  );
};

export default Events;

I tried other