NextJs + TypeScript progress bar

Question

I am trying to add a progress bar using nprogress to my project, but all examples I have come across, such as This example and This other example, are for Next.js projects not built with TypeScript.

In my project I dont have the /pages/_app.js file to configure as

import Router from 'next/router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Router.events.on('routeChangeStart', () => NProgress.start()); 
Router.events.on('routeChangeComplete', () => NProgress.done()); 
Router.events.on('routeChangeError', () => NProgress.done());
function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}
export default MyApp;

In my project, I have my pages/_app.tsx setup as

import React from "react";
import type { AppProps } from "next/app";
import "./global.css";

import Router from "next/router";
import NProgress from "nprogress"; //nprogress module
import "nprogress/nprogress.css"; //styles of nprogress
//Route Events.
Router.events.on("routeChangeStart", () => NProgress.start());
Router.events.on("routeChangeComplete", () => NProgress.done());
Router.events.on("routeChangeError", () => NProgress.done());

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div id="root">
      <Component {...pageProps} />
    </div>
  );
}

Can the progress bar work? because as I currently have it, it's not working.