Working on a project here and I ran into an issue. I am using an API and I receive images of a product. It looks like this:
[![enter image description here](https://i.stack.imgur.com/XOxmb.png)](https://i.stack.imgur.com/XOxmb.png)

The issue I am having is that the image doesn't appear on my page, nothing at all appears. Even if I try to just write the link in an `<h1>` tag, nothing appears. I tried to log the URLs in console, and it works there using the `.map` method.

I have tried with `Object.keys()` and `array.map()`, but non of them work.

Here is my API fetch code:

```
  useEffect(() => {
    const options = {
      method: "GET",
      url: "https://asos2.p.rapidapi.com/products/v3/detail",
      params: params,
      headers: {
        "x-rapidapi-key": "",
        "x-rapidapi-host": "",
      },
    };

    axios
      .request(options)
      .then(function (response) {
        console.log(response.data);
        setProduct(response.data);
      })
      .catch(function (error) {
        console.error(error);
      });
  }, []);

  // This works
  product?.media?.images.map((item) => {
    console.log(item.url);
  });

  return (
    <div>
      <Product
        name={product?.name}
        price={product?.price?.current?.text}
        brand={product?.brand?.description?.replace(/(<([^>]+)>)/gi, "")}
        brandName={product?.brand?.name}
        aboutMe={product?.info?.aboutMe?.replace(/(<([^>]+)>)/gi, " ")}
        careInfo={product?.info?.careInfo?.replace(/(<([^>]+)>)/gi, "")}
        sizeAndFit={product?.info?.sizeAndFit?.replace(/(<([^>]+)>)/gi, "")}
        media={product?.media?.images}
      />
    </div>
  );

```

And here is the product section where it shall render:

```
  <div>
    {props.media?.map((media) => {
      <h1>{media.url}</h1>;
    })}
  </div>

```

The page is just completely blank.

What am I missing?