supabase bucket getPublicUrl returns url that doesnt work

I'm using the supabase js API to create a public bucket and upload images to it. This works so far:

const { data: bucket, error } = await supabase.storage.createBucket(
        bucketName,
        {
          public: true,
        }
      );

//// map an array of files

const { data, error } = await supabase.storage
              .from(bucketName)
              .upload(filename, file, {
                cacheControl: "3600",
                upsert: false,
              });

I can see the files uploaded correctly in the supabase console but I can't display them on my project. I get the url but it doesn't show, and when i enter that link direclty in the navigator I get an error of "object not found"

 const { data, error } = await supabase.storage.listBuckets(
        order.bucketId
      );
      let files = [];
      data.map((file) => {
        const { data, error } = supabase.storage
          .from(order.bucketId)
          .getPublicUrl(file.name);
        files.push(data.publicUrl);
      });

I don't understand what's wrong. I gave all permissions in the buckets policies and also tried using a private bucket, but it also gives the same error.

You seem to be fetching the list of buckets instead of list of files in the bucket. You can use the list() method to get the list of files in your bucket.

const { data, error } = await supabase.storage.from(order.bucketId).list('/path/to/your/files');
      let files = [];
      data.map((file) => {
        const { data, error } = supabase.storage
          .from(order.bucketId)
          .getPublicUrl(file.name);
        files.push(data.publicUrl);
      });