Table rows as react components aren't getting rendered - html

Question

I'm trying to return multiple table rows from PlayerTableRow inside PlayerTable, but I can't get it to work. Console shows no errors. Only the table headers get rendered. If I substitute all in PLayerTableRow with static content, it still doesn't render. I guess there is something wrong with the use of childreen, but I can't figure it out.
function App() {
const PlayerRoster = new Map([
"1",
{
position: "None",
name: " ",
skill1: " ",
skill2: " ",
},
],
[
"2",
{
position: "None",
name: "",
skill1: "",
skill2: "",
},
]);
return (
<div className="">
<PlayerTable>
{playerRoster.forEach((player, key) => {
<PlayerTableRow />;
})}
</PlayerTable>
</div>
);
}
function PlayerTable({ children }) {
return (
<table>
<thead>
<tr>
<th>No.1</th>
<th>Player Name</th>
<th>Position</th>
<th>MA</th>
<th>ST</th>
<th>AG</th>
<th>PA</th>
<th>AV</th>
<th>Skills</th>
<th>Skill1</th>
<th>Skill2</th>
<th>Price</th>
</tr>
</thead>
<tbody>{children}</tbody>
</table>
);
}
function PlayerTableRow( ) {
return (
<>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</>
);
}