Unable to convert the json value to object array and map it to a table

ReactJS
1

Unable to get the Json object into an array.
This is the Json.

{“PGX”:{“stats”:{“week52change”:-0.01996,“week52high”:15.28,“week52low”:9.71,“marketcap”:4780621500,“employees”:null,“day200MovingAvg”:14.38,“day50MovingAvg”:14.85,“float”:null,“avg10Volume”:2676775.6,“avg30Volume”:2828782.23,“ttmEPS”:null,“ttmDividendRate”:0.8153,“companyName”:“Invesco Preferred ETF”,“sharesOutstanding”:324550000,“maxChangePercent”:-0.3027,“year5ChangePercent”:-0.0241,“year2ChangePercent”:-0.0221,“year1ChangePercent”:-0.01996,“ytdChangePercent”:-0.026438,“month6ChangePercent”:0.072052,“month3ChangePercent”:0.017968,“month1ChangePercent”:-0.000678,“day30ChangePercent”:-0.004057,“day5ChangePercent”:-0.016032,“nextDividendDate”:“2020-11-23”,“dividendYield”:0.055349626612355735,“nextEarningsDate”:null,“exDividendDate”:“2020-10-19”,“peRatio”:null,“beta”:0.5522864949289512},“quote”:{“symbol”:“PGX”,“companyName”:“Invesco Preferred ETF”,“primaryExchange”:“NYSE Arca”,“calculationPrice”:“close”,“open”:null,“openTime”:null,“openSource”:“official”,“close”:null,“closeTime”:null,“closeSource”:“official”,“high”:null,“highTime”:1603402146753,“highSource”:“15 minute delayed price”,“low”:null,“lowTime”:1603376785625,“lowSource”:“15 minute delayed price”,“latestPrice”:14.82,“latestSource”:“Close”,“latestTime”:“October 22, 2020”,“latestUpdate”:1603396800042,“latestVolume”:null,“iexRealtimePrice”:14.82,“iexRealtimeSize”:300,“iexLastUpdated”:1603396799904,“delayedPrice”:null,“delayedPriceTime”:null,“oddLotDelayedPrice”:null,“oddLotDelayedPriceTime”:null,“extendedPrice”:null,“extendedChange”:null,“extendedChangePercent”:null,“extendedPriceTime”:null,“previousClose”:14.73,“previousVolume”:2781713,“change”:0.09,“changePercent”:0.00611,“volume”:null,“iexMarketPercent”:0.029145024828118926,“iexVolume”:94931,“avgTotalVolume”:2828782,“iexBidPrice”:0,“iexBidSize”:0,“iexAskPrice”:0,“iexAskSize”:0,“iexOpen”:null,“iexOpenTime”:null,“iexClose”:14.82,“iexCloseTime”:1603396799904,“marketCap”:4809831000,“peRatio”:null,“week52High”:15.28,“week52Low”:9.71,“ytdChange”:-0.020328,“lastTradeTime”:1603396800039,“isUSMarketOpen”:false}},“MORL”:{“stats”:

This is my code:


   const [symbol, setSymbol] = useState([]);
   const [loading, setLoading] = useState(false);
   const getSymbolData = async () => {
     try{
       const data = await axios.get("https://cloud.iexapis.com/stable/stock/market/batch?symbols=PGX,MORL,EMLC,GYLD");
       console.log(data);
       setSymbol(data.data);
     } catch (e) {
       console.log (e);
     }
   };

const columns = [

  {dataField: "price", text: "Current Price"},
  {dataField: "symbol", text: "Symbol" },
  {dataField: "companyName", text : "Company Name"}

];
 useEffect (() => { 
   getSymbolData();
   }, []);
  return (
   <div className="App"> 
  
      <BootstrapTable
      keyField= "symbol"
      data= {symbol}
      columns={columns}
      pagination={paginationFactory()}
      />  
  </div>
  );
};

export default App;