How to map strapi v4 object in reactjs?

Hi I am new at strapi and as I read there are main changes in strapi when I get api in postman it return an object which have a keys of ['data','meta']. How to get a attributes in strapi object using map in reactjs?. I try to find solution in strapi doc or video but didnt get the solution yet. There are more code example I already tried but I keep it simple so I only pick one. Thanks in advance


//USING JS FETCH FUNCTION

import {useEffect,useState} from 'react'


const FetchTest = () => {
    const [detail,setDetail] = useState([])
    const valueofdetail = Object.keys(detail) //CHECK KEYS IN DETAIL STATE  
    const detailedata = detail.data //USING KEY FOR ACCESS THE ARRAY OF DETAIL
    console.log(valueofdetail) //LOG THE KEYS
    console.log("detailedata is an array " + Array.isArray(detailedata)) // CHECK IF THE CONST ARRAY OR NOT
    console.log(detailedata) // SHOW THE ARRAY
    const newData = []
    useEffect(() => {
            fetch('http://localhost:1337/api/products',{
                headers: {
                    Authorization:
                    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNjU0NTA5MDE1LCJleHAiOjE2NTcxMDEwMTV9.HOGhkG--nRYbPQKmOsNo75VAOKQydu1kw8o8MncdhdE',
                },
            })
            .then((response) => response.json())
            .then((data) => setDetail(data))
            .then(console.log("Data success"))
            .catch((err) => { 
                console.log(err)
                
    
            })
            
        },[])
      
      return ( 
          //Try to iterate throught the object array using map
          <div>
              {
                  detailedata.map((product) => {
                      return <li>{product}</li>
                  })
              }
              <br></br>
              <br></br>
              <p>{JSON.stringify(detail)}</p>
          </div>
       );
  }
   
export default FetchTest;
  
/**
  // detail.map((item) => {return <li>{item}</li>})
// <p>{JSON.stringify(detailedata)}</p>
 */

**STRAPI POSTMAN GET FOR SINGLE ID **

{
    "data": {
        "id": 1,
        "attributes": {
            "title": "Xiaomi Headset Keren",
            "price": 30000,
            "city": "Surabaya",
            "createdAt": "2022-06-06T08:27:57.310Z",
            "updatedAt": "2022-06-07T10:37:50.517Z",
            "publishedAt": "2022-06-06T08:40:23.113Z"
        }
    },
    "meta": {}
}