Firebase - getToken() throws Unsupported MIME type

I have a react-create-app application, in which I used firebase for pushnotification. Recently I upgraded firebase from 8.* to 9.*. While getting push token, it throws the following error:

FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('https://9fd5-49-204-137-92.ngrok.io/firebase-cloud-messaging-push-scope') with script ('https://9fd5-49-204-137-92.ngrok.io/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html'). (messaging/failed-service-worker-registration).

In firebase.js, I have the following code set, which throws the above mentioned error

    import { initializeApp } from "firebase/app"import { getToken, getMessaging, onMessage } from "firebase/messaging";

const message_key = "key"var firebaseConfig = {
  apiKey: "apikey",
  authDomain: "authdomain",
  projectId: "project-app",
  storageBucket: "******.com",
  messagingSenderId: "id",
  appId: "appid",
  measurementId: "mid"
};

const firebaseApp = initializeApp(firebaseConfig);

 let messaging = getMessaging(firebaseApp);

    if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register(process.env.PUBLIC_URL + "/firebase-messaging-sw.js")
        .then(function(registration) {
          console.log("Registration successful, scope is:", registration);
    
          getToken({messaging, vapidKey: message_key})
          .then((currentToken) => {
            if (currentToken) {
              console.log('current token for client: ', currentToken);
            } else {
              console.log('No registration token available. Request permission to generate one.');
            }
          }).catch((err) => {
            console.log('An error occurred while retrieving token. ', err);
          });
        })
        .catch(function(err) {
          console.log("Service worker registration failed, error:", err);
        });
        }}

How can I solve this issue?