how to register Service Worker in a different folder other than public folder

Question

I have created a basic service worker file which is located in src\services\notify\sw.js and used for providing only notification. It was working fine when I had the file in public folder but I have actions button inside notification, so i placed it inside service folder so I can call my functions present inside service folder for my notification action button onclick. Now I can't register the service worker since its not present in the same folder as index.html. Is there any work around for this like to register sw from other than root folder or any other way to write notification action button onclick. I am using them in react.js and also sorry if the ans is something obvious because i am new to service worker and its been 4hrs since i learned the word service worker.

Below is my function to register service worker which call in login.jsx useeffect

export const registerServiceWorker = async () => {
    if ("serviceWorker" in navigator) {
        try {
            navigator.serviceWorker.register("./sw.js", {
                scope: "/",
            }).then((registration) => {
                if (registration.installing) {
                    Logger.log("Service worker installing");
                } else if (registration.waiting) {
                    Logger.log("Service worker installed");
                } else if (registration.active) {
                    Logger.log("Service worker active");
                }
            }).catch(error => Logger.log(error))
        } catch (error) {
            Logger.error(`Registration failed with ${error}`);
        }
    }
};

Below is the notification onclick listener

self.onnotificationclick = (event) => {
    console.log("On notification click: ", event.notification.tag);
    event.notification.close();
    console.log('[Service Worker] Notification click Received.', event);
    if (event.action === 'answer') {
        console.log("Answer clicked",);
    } else if (event.action === 'decline') {
        console.log("Decline clicked",)
    }
    event.waitUntil(
        clients.matchAll({ type: "window", includeUncontrolled: true }).then((clientList) => {
            console.log(clients, clientList, "list of tabs in clients");
            if (clientList.length > 1) {
                clientList.forEach((client) => {
                    if (client.url === "/" && "focus" in client) return client.focus();
                })
                if (clients.openWindow) return clients.openWindow("/");
            } else {
                clientList[0].focus();
            }
        })
    );
};

This is the error I got for changing path DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/sw.js'): The script has an unsupported MIME type ('text/html').

these are my functions the only reason i changed the folder of sw.js file is I wasn't able to import my service functions because they were out of scope, so can you please share any solution....