Placing Fetch Data to React Table - reactjs

Question

I am trying to get API fetch data from my server and database to a React table. Everything seems to load and fetch the data and network seem to come in my network, but the data is still not presented in it and turns up plank with the table header.
For the data I am passing, this is a nested object file.
For example,
{
_id: Number...,
national_id: 0,
name: 'Test School',
coach: Head Coach
{
Here is table.js:
import React from 'react';
const DisplayTable = ({data}) => {
return (
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Coach</th>
</tr>
</thead>
<tbody>
{Object.keys(data).map(item => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.coach}</td>
</tr>
))}
</tbody>`
</table>
</div>
)
} export default DisplayTable
Here is my file where I intend to fetch and use that fetched data to be arranged with my displayTable
import React, { useEffect, useState } from "react";
import Table from '../TableMentor/table';
function FilterTable() {
const [elements, setElements] = useState([])
useEffect(() => {
var postData = ['national_id:', 'name', 'coach']
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(postData)
};
fetch('/api/get-data', requestOptions).then(res => res.json()).then(
data => {
setElements(data.collection)
})
},[]);
return (
<div className="app">
<h1> React Table </h1>
<Table data={elements} />
</div>
);
}
export default FilterTable;
Here is an image:
The Resulted Page