React JS Table Issue

Question

I have a issue trying to fill a table with data that i recieve from a api.

I used axios to get the information, then i stored that into a state, and finally, i send to a projectsTable, that's a component to render a table with all the data.

The message that i recieved from the console is the follow "Uncaught Error: Objects are not valid as a React child (found: object with keys {---}). If you meant to render a collection of children, use an array instead."

I put some console logs to try to find the problem, and i saw that in the useEffect (when i read the information first), the setState doesn't execute.

I think that the problem could be in the render, because it's try to return the ProjectTable BEFORE the setProjects is execute, am i right?

Here I detach the code

export default function App() {

 const columns = useMemo(
() => [
  {
    Header: 'Project',
    columns: [
      {
        Header: 'Name',
        accessor: 'name'
      },
      {
        Header: 'details',
        accessor: 'details'
      }
    ]
  }

 const [projects, setProjects] = useState([]);

useEffect(() => {
 axios
  .get(URL_PROJECTS)
  .then((response) => {
    setProjects(response.data);
  })
  .catch((err) => console.log(err));
 }, []);


return (
 <div>
   {projects.length !== 0 ? <ProjectTable data={projects} columns={columns} /> : <div   />}
 </div>
);

ProjectTable

export default function ProjectTable({ data, columns }) {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
columns,
data
});

return (
 <table {...getTableProps()}>
   <thead>
    {headerGroups.map((headerGroup) => (
      <tr {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map((column) => (
          <th {...column.getHeaderProps()}>{column.render('Header')}</th>
        ))}
      </tr>
    ))}
  </thead>
  <tbody {...getTableBodyProps()}>
    {rows.map((row, i) => {
      prepareRow(row);
      return (
        <tr {...row.getRowProps()}>
          {row.cells.map((cell) => (
            <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
          ))}
        </tr>
      );
    })}
  </tbody>
</table>
 );
}