Fetch multiple URL and setting the results in a state

Question

I have to fetch each url within the ProductsUrl array and set the response that the fetch returns within the Products state, so that later in the render, render each product with a products.map

I've tried promise.all, axios.all, async await... thousands of ways and I can't figure it out.

Also have tried with another examples here in stack but i could not find the answer

import React, { useState, useEffect } from 'react'
import Card from './Card'

function Main() {
    const productsUrl = [
        'https://api.fasdfds.com/items/MLA884216659',
        'https://api.fdsfsd.com/items/MLA646715969',
        'https://api.fdsfsf.com/items/MLA906258237'
    ]

    const [productos, setProductos] = useState([])

    useEffect(() => {
        productsUrl.forEach(url => fetch(url))
            .then(res => res.json())
            .then(data => setProductos([...productos, data]))
    }, [])
    return (
        <main>
            {productos ? productos.map(producto =>
                <Card
                    key={producto.id}
                    src={producto.thumbnail}
                    title={producto.title}
                    prevPrice={producto.original_price}
                    newPrice={producto.price}
                    discount={producto.original_price / producto.price}
                />

            )
                :
                <h1>loading</h1>
            }



        </main>
    )
}

export default Main