mp3 static asset served from the .next directory is giving me a 404 not found error

Question

As the title states, I have a static mp3 asset located in my public directory. However the browser developer tools is telling me that it can not find the asset due to a failed GET request to the .next directory, despite that I am not retrieving the asset via a GET request in my code, it is a local file. I also noticed that next.js added a series of alphanumeric characters to the name of the file it copied into the .next directory. I learned that when it builds it does that for all assets located in the public directory, but even though next.js is doing that the browser still can not find it. Is there a way i can utilize the asset without next.js doing a GET request to .next directory?

this is how i have my configurations for next.config.js:

webpack(config) {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
  config.module.rules.push({
    test: /\.(ogg|mp3|wav|mpe?g)$/i,
    use: [
      {
        loader: "file-loader",
        options: {
          name: "[name]-[hash].[ext]",
        },
      },
    ],
  });

this is how i am trying to import the locally stored mp3 file to use it with tone.js:

import sampleThemeMusic from "../../public/sampleThemeMusic.mp3";

this is the URL that ends up receiving a failed GET request:

http://localhost:3001/_next/sampleThemeMusic-5addd277c8fafc9eab069c1e42f3842e.mp3

if someone can help me understand how does importing from the public directory ends up being a GET request to that URL , it'd be much appreciated!