I'm trying to download images from my superbase db and bucket. each post uploads multiple photos and gets its own folder id in which the images are stored. I then upload the image's pathNames to the DB so I can fetch the corresponding photos for the post on the next page. my problem is I'm having trouble rendering the correct photos to the correct post

how it works atm

• 1.useEffect downloads all images from Db

• 2.I need to match those img Ids with the IDS in the DB table to render photos §

the download fnc

const downloadImage = async (path, imgPath) => {
return await supabase.storage
  .from("public/job-photo")
  .download(`jobcomplete/${path}/${imgPath}`)
  .then(({ data, error }) => {
    if (error) throw error;
    return URL.createObjectURL(data);
  });

component

export default function Projects({ dataFetch, downloadImg, header, desc }) {
  const [urls, setUrls] = useState([]);
  // Fetch all URLS when the component mounts:
  console.log(urls);

  const postImgRender = () => {
    if (urls.some((e) => e.id === "q-kwhu8nkq")) {
      console.log(e, "Here");
      /* vendors contains the element we're looking for */
    }
  };

  useEffect(() => {
    if (!dataFetch) return;
    dataFetch.forEach((item, i) => {
      for (let i = 0; i < item.imgPath.length; i++) {
        const newImage = item.imgPath[i];
        downloadImg(item.genid, newImage).then((url) => {
          let imgObj = {
            id: item.genid,
            imgPaths: url,
          };
          setUrls((prevState) => [...prevState, imgObj]);
        });
      }
    });
  }, []);

  return ( ect.....

JSX

{dataFetch ? (
    <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
      {dataFetch.map((item, i) => (
        <div
          key={item.genid}
          className="flex flex-col rounded-lg shadow-lg overflow-hidden"
        >
          <div className="flex-shrink-0">
            {urls.map((url, i) => {
              if (Object.keys(url.id) === item.genid);
              return <img src={url.imgPaths} />;
            })}
          </div>

Trying to work out if this would be the correct approach maybe get the keys im not sure?

 const postImgRender = () => {
    if (urls.some((e) => e.id === "q-kwhu8nkq")) {
      console.log(e, "Here");
      /* vendors contains the element we're looking for */
    }
  };

URLS ARR