guys please i have been battling this for hours.

export async function DownloadAvatar(folder: string, path: string) {
  const supabase = createClient(cookies());
  const { data, error } = await supabase.storage.from(folder).download(path);

  // convert the data to a base 64

  if (error) {
    return { data: null, error };
  }

  console.log(data);

  const url = URL.createObjectURL(data);

  console.log(url)
  return { data: url, error: null };
}

when i recieve this on the client, the image doesnt display

  useEffect(() => {
    async function GetAvatar(imageFolder: string, fetchedAvatarUrl: string) {
      const { data, error } = await DownloadAvatar(
        imageFolder,
        fetchedAvatarUrl
      );

      if (error) {
        console.log(error.message);
      }

      if (data) {
        setAvatarUrl(data);
      }
    }

    if (fetchedAvatarUrl) {
      GetAvatar("avatars", fetchedAvatarUrl);
    }
  }, [fetchedAvatarUrl, toast]);

i keep getting

Not allowed to load local resource: blob:nodedata:207ca198-5dcf-41f6-8ffb-368474e408dc