attributes not working from strapi URL data fetch

Question

i been trying to display the data i got from strapi url , i get the data fine with axios but when i dislpay it , it cant read the attributes from the url data ill post code images for better understanding

i expected to get the data from

item item.attributes.price or what ever i want

axios fetch

 const [data, setData] = useState([]);

   useEffect(() =>{
    const fetchData = async () =>{
      try{
        const res = await axios.get("http://localhost:1337/api/products",{
         headers:{
          Authorization: "bearer" + process.env.REACT_APP_API_TOKEN,
         }
         
        })
        setData(res.data.data)
        console.log(data);
       
      }catch(err){
        console.log(err);
      }
    }
    fetchData();
   },[])

how i am trying to pass the data

  <div className="bottom">
       {
        data.map(item =>  <Card item={item}   key={item.id}/>)}
       </div>
    </div>

Card components

const Card = ({item}) => {
  return (
    <Link to={`/product/${item.id}`}>
     <div className='card'>
      <div className="image">
      {item.isNew && <span>New Season</span>}
        <img src={item.image} alt="" className="mainImg" />
        <img src={item.image} alt="" className="secondImg" />
      
        </div>
      <h2>{item.title}</h2>
      <div className="prices">
        <h3>${item.price +187}</h3>
        <h3>${item.price}</h3>
      </div>
     </div>
    </Link>
    
  )
}
````your text`


     [responses ][1]


  [1]: https://i.stack.imgur.com/U55Ww.jpg