I'm trying to fetch data from Firebase, I implemented nearly same codes like my react native app but this time I'm facing some problems that I couldn't figure out.

import {db} from './firebase'
const formatMarketData = (data) =>{
    let formattedData = [];
    
    data.forEach(item=>{
    const formattedItem = {
        ...item
    }
    formattedData.push(formattedItem);
    });
    return formattedData;
    }
export const FirebaseService = async (id) => {
    id=id.replace(/['"]+/g, "");
    const historyKey="/coins/0/"+id
    await 
      db.ref(historyKey)
      .once('value')
      .then(snapshot => {
        const data = snapshot.val();
        const formattedResponse= formatMarketData(data);
        console.log(formattedResponse)
        return formattedResponse
      });
};
     

This function helps me to retrieve data from my firebase rtdb. The console.log functions works and writes as expected but when I'm trying to catch it in my News page it becomes undefined.

import React from 'react'
import { useState,useEffect } from 'react'
import { FirebaseService } from '../../Services/FirebaseService'
const NewList = ({id}) => {
    const [data,setData] = useState([])
    useEffect(()=>{
        console.log(id)
        const fetchMarketData = async () =>{
        const marketData =  await FirebaseService(id);
        return setData(marketData);
        }
        fetchMarketData();
        return () => {
        }
    },[])
    return (
        <div>
           {data!==undefined?data.map((d)=>{return(<p>{d.id}</p>)})
                            :<p>no data yet</p>}
        </div>
    )
}

export default NewList

I'm missing something but I can't notice. Another view might be helpful.