Im making a request from a JSon file in a webpage, but is returning a blank screen.

import { useEffect, useState } from 'react';
import axios from 'axios'
import './App.css';
import React from 'react';


function App() {

    const [posts, setPosts] = useState([])

    useEffect(() => {
      axios.get("https://economia.awesomeapi.com.br/json/last/USD-BRL")
      .then((response) => {
        console.log("ok")
        console.log(response.data)
        setPosts(response.data)
      }).catch(() => {
        console.log("erro")
      })
    
  }, [])

  return (
    <div>
      {posts?.map((post, key) =>{
      return(  
      <div key={key}>
        <td></td>
        <td>Dolar</td>
        <td>{post.bid}</td>
        <td>{post.create_date}</td>
      </div>)
    })}

  );
}

export default App;

The console is able to see the json file, but the page on the browser is completely blank: