.map() the data from API in useEffect react - reactjs

Question

I am kinda new at react and trying to make two axios get call according to results of first call as you can see in my code. Eventually I am trying to .map the response data in swiper component. However my code is not working properly. The problem is, the data from the first call is displayed on the component properly while the images from the second call are not.
const [picks, setPicks] = useState([]);
const getAllPicks = async () => {
try {
axios.get(".../shoppicks").then(async (response) => {
const responseData = await response.data.result;
for (let i = 0; i < responseData.length; i += 1) {
axios.post(".../getimage", { shopID: response.data.result[i]._id }).then((res) => {
if (res.data.header.arg === "No image found") {
// dummy photo for corrupted responses
responseData[i].imgPath = "#"
} else {
responseData[i].imgPath = res.data
}
})
}
return responseData
}).then((responseData) => {
setPicks(responseData)
console.log(responseData) row 38 logs the data properly
console.log(picks) row 39 logs empty array
})
.catch((error) => console.log(JSON.stringify(error)));
}
catch (error) {
console.log(error)
};
}
useEffect(() => {
getAllPicks();
}, []);
Here where I try .map the data
{picks?.map((pick: IHomePickType) => (
<><SwiperSlide key={pick._id}>
<CardMedia image={pick.imgPath} component="img" />
<div>
<h2>{pick._id}</h2>
</div>
</SwiperSlide></>
))}
Additionally it throws "Each child in a list should have a unique "key" prop." console error even though the picks data has unique keys

Answer 1

I've updated my code according the comments. It is working now.
here is the final code
const [picks, setPicks] = useState([]);
const getAllPicks = async () => {
try {
const response = await axios.get("../shoppicks");
const data = await response.data.result;
for (let i = 0; i < data.length; i += 1) {
const imgResponse = await axios.post("../getimage", { shopID: data[i]._id });
if (imgResponse.data.header.arg === "No image found") {
// dummy photo for corrupted responses
data[i].imgPath = "#"
} else {
data[i].imgPath = imgResponse.data.result.imgPath
}
}
setPicks(data)
}
catch (error) {
console.log(error)
};
}
component =>
{picks?.map((pick: IHomePickType) => (
<SwiperSlide key={pick._id}>
<CardMedia image={pick.imgPath} component="img" />
<div>
<h2>{pick._id}</h2>
</div>
</SwiperSlide>
))}
Thanks