React E-commerce App: Issue with Fetching Product Information Using IDs from Database

Im facing a problem in my React e-commerce app . I need to get “Products ID’s” from a specific user in the DB and after that I need to fetch information from each product ID I have fetched before .Im already have sucess in the first step of receiving the Products ID and storing in the “const resultProductsArray” . Now when I want to “map” this array to fetch the information for each ID my “fetch code” is not running . Im receiving correctly the console.log(‘testing loop’,item ) with the rigth information,but not receiving the console.log(‘resultFetch’,resp). Im not receiving even the console.log from the catch(error) in the map function
Can someone explain the problem and the best way to approach solutions in react ? =)


import EachProductSaved from "./eachProductSaved";
import { Heading, Pane } from "evergreen-ui";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faHeart} from '@fortawesome/free-solid-svg-icons'
import axios from "axios";
import { useEffect } from "react";

const MyLikedProducts = () => {
  // const [arrayWishList,setArrayWishList] = useState([])

  useEffect(() => {
   getMySavedProducts()
  },[])

  const getMySavedProducts = async () => {
    try {
      const userId = localStorage.getItem('USER_ID');
      const resp = await axios.get(`http://localhost:3001/getUserData/${userId}`);
      console.log('result',resp)
      const resultProductsArray = resp.data.wishesList;
      console.log('resultProductsArray',resultProductsArray)

      resultProductsArray.map(async (item) => {
        try {
        console.log('testing loop',item)
        const resp = await axios.get(`http://localhost:3001/getProductById/${item}`)
       
        console.log('resultFetch',resp);
      }
      catch(error) {
      console.log('ERROR IN GetDataFromEachProduct FUNCTION')

      }});
      
    }

    catch(error) {
      console.log('ERROR IN GETMYSAVED PRODUCTS FUNCTION',error)
    }
  }



  
  
  

 

  return (
    <Pane
      display="flex"
      flexDirection='column'
      width="65vw"
      flexWrap="wrap"
      marginTop="10vh"
      justifyContent="space-between"
      marginLeft='17vw'
      padding={40}
      borderRadius={8}
      background="white"
      boxShadow="0 1px 4px rgba(0, 0, 0, 0.1)"
    >
        <Pane display='flex'
        alignSelf='center'>
            <FontAwesomeIcon icon={faHeart} size='2x' style={{color:'green'}} />
        <Heading className="my-wishes">Lista de Desejos</Heading>
        </Pane>
      <EachProductSaved productName={"Cesto Cozimneto A Vapor Inox"} />

      <EachProductSaved productName={"Faca Chef Profissional Silicone"} />

      <EachProductSaved productName={"Escorredor de Alimentos em Inox"} />
    </Pane>
  );
};

export default MyLikedProducts;