I have this code inside a React class component and when I try calling `document.getElementById(photo._id)` it keeps returning null although when I tried `console.log(photo._id)` in both lines, the line in the render is printed first in the console so the id is supposed to be there?

```
componentDidMount() {
    this.props.location.state.product.photos.map((photo) => {
      return axios
        .get(`${SERVER_HOST}/products/photo/${photo.filename}`)
        .then((res) => {
          if (res.data) {
            if (res.data.errorMessage) {
              console.log(res.data.errorMessage);
            } else {
              console.log(photo._id);
              console.log(document.getElementById(photo._id));
            }
          } else {
            console.log("Record not found");
          }
        });
    });
  }

render() {
    return (
    {this.props.location.state.product.photos.map((photo) => {
         { console.log(photo._id); }
         <img key={photo._id} id={photo._id} />;

     })}
  )
}

```

[Here is a picture of the console](https://i.stack.imgur.com/EJ80Z.png)