Unable to retrieve publicUrl from supabase api even with no RLS enabled

I am learning to use Supabase storage to store files (images) and retrieve the public url and store them in my database to save space. but the issue is that I am able to upload it to supabase but when variable that stored the retrieved publicUrl is undefined. Not sure what I did wrong or if I have to configure the supabase policy. So far browsing through the internet I haven't seen anyone else experience the same problem as me. I hope to get some input on this.

Here's my snippet of code

try {
    
    const filePath = `product_images/${Date.now()}-${file.originalname}`;
    const { data, error } = await supabase.storage
      .from("product_image")
      .upload(filePath, file.buffer, {
        contentType: file.mimetype,
        cacheControl: "3600",
        upsert: false,
      });

    if (error) {
      console.error("Error uploading to Supabase:", error.message);
      return res.status(500).json({ error: "Failed to upload image" });
    }
    console.log(data);
    
    const { publicURL } = supabase.storage
      .from("product_image")
      .getPublicUrl(data.path);

    
    console.log(publicURL);
} catch (error) {
    console.error("Error adding product:", error);
    res.status(500).json({ error: "Failed to add product" });
}

I tried ChatGPT, changing my API keys around, don't understand much RLS yet but tried to remove all RLS and auth access restriction as much as I know, tried messing with the data.path and hardcodes the path to get the public url but nothing works.

Supabase Docs

You're accessing public url incorrectly.

It should be like this

const { data } = supabase.storage
      .from("product_image")
      .getPublicUrl(data.path);

console.log(data.publicUrl)