Renderice los datos obtenidos de axios utilizando Material UI (La imagen no se está mostrando).

Mi imagen de código no se muestra correctamente. Cuando voy a la consola, las llamadas de axios funcionan bien.

import { Container, Grid, Paper } from ‘@mui/material’;
import { useEffect, useState } from ‘react’;
import { styled } from ‘@mui/material/styles’;
import ButtonBase from ‘@mui/material/ButtonBase’;
import axios from ‘axios’;

const Img = styled(‘img’)({
margin: ‘auto’,
display: ‘block’,
maxWidth: ‘100%’,
maxHeight: ‘100%’,
});

const Home = () => {

const [albums, setAlbums] = useState([]);

useEffect(async () => {
const res = await axios.get(`https://jsonplaceholder.typicode.com/albums?userId=2`);

let tempArr = JSON.parse(JSON.stringify(res)).data;
let photos = [];

tempArr.forEach(async (element, index) => {
  let res2 = await axios.get(`https://jsonplaceholder.typicode.com/albums/${element.id}/photos`);
  photos = JSON.parse(JSON.stringify(res2)).data;
  element.photos = photos;
  tempArr[index] = element;
});

setAlbums(tempArr);

}, []);

return (

{albums.map((item, key) => {
return (


{(undefined !== item[‘photos’] && item[‘photos’].length) &&



}


)
})}

)
}

export default Home;

Sería de gran ayuda si alguien pudiera echarle un vistazo. Cuando hago un console.log justo después de setAlbums(tempArr); la matriz se ve así,

[
{
“userId”: 2,
“id”: 11,
“title”: “quam nostrum impedit mollitia quod et dolor”,
“photos”: [
{
“albumId”: 11,
“id”: 501,
“title”: “asperiores exercitationem voluptates qui amet quae necessitatibus facere”,
“url”: “https://via.placeholder.com/600/cda4c0”,
“thumbnailUrl”: “https://via.placeholder.com/150/cda4c0”
},
{
“albumId”: 11,
“id”: 502,
“title”: “omnis qui sit et”,
“url”: “https://via.placeholder.com/600/74e371”,
“thumbnailUrl”: “https://via.placeholder.com/150/74e371”
},
{
“albumId”: 11,
“id”: 503,
“title”: “modi voluptas fugiat eos”,
“url”: “https://via.placeholder.com/600/9022fb”,
“thumbnailUrl”: “https://via.placeholder.com/150/9022fb”
},

    ]
}

]

Y cuando intento hacer un bucle de

{item[‘photos’][0][‘thumbnailUrl’]}

obtengo un error,

TypeError: Cannot read properties of undefined (reading ‘0’)