Estoy recibiendo un error en la consola de la siguiente manera:

 Cannot read properties of undefined (reading 'map')

He buscado mucho en línea durante las últimas horas y todas las soluciones indican que la llamada asíncrona no está definida y es por eso que no se pasa ningún valor al mapa. La cuestión es que se define y llama con un objeto vacío para forzar la espera. Por favor, ¿alguien podría decirme lo que me falta en el siguiente código?

 const [product, setProduct] = useState({}); useEffect(() => { const getProduct = async () => { try { const res = await publicRequest.get("products/find/" + id); setProduct(res.data); } catch (err) {} }; getProduct(); }, [id]);

Esto obtiene un objeto 'Producto', que contiene un campo de matriz llamado color. Lo uso para mostrar varias opciones en la página.

 {product.colour.map((c) => ( <FilterColor colour={c} key={c} /> ))}

Cuando cambio el código de efecto de uso para registrar en la consola res.data.colour, obtengo los valores de color. No entiendo por qué este mapa arroja este error indefinido, cuando el producto se define como resultado de la llamada setProduct.

Espero que alguien pueda ayudar :)

Editar: otros fragmentos de código que ayudarán a comprender lo anterior:

 export const publicRequest = axios.create({ baseURL: BASE_URL,});

y así es como obtengo console.log para mostrar los colores, cambiando la sección useeffect:

 useEffect(() => { const getProduct = async () => { try { const res = await publicRequest.get("products/find/" + id); setProduct(res.data); console.log(res.data.colour); //this displays an array of colours in the console } catch (err) {} }; getProduct(); }, [id]);

y sin usar la función map(), puedo mostrar datos como este: <Title>{product.title}</Title>