How to animate Table Item Entry using TransitionGroup and Material UI Tables in ReactJS

I am having an issue where I can't seem to get TransitionGroup to work with Material UI ReactJS library

My expectation is pretty simple, upon entry into the table the row should be animated in like sliding into the table.

I have tried the following but this only end up scattering the table, the headers and everything becomes out of shape.

Here is what I have tried using the Material UI library for ReactJS

                   <TableContainer>
                        <Table aria-label="stats-table">
                            <TableHead>
                                <TableRow>
                                   {...}
                                </TableRow>
                            </TableHead>
                            <TransitionGroup
                                transitionName="fade"
                                transitionEnterTimeout={1000}
                                transitionLeaveTimeout={300}
                                transitionAppearTimeout={1000}
                                transitionAppear={true}
                                component="tbody">
                                <TableBody>
                                    {
                                        (rowsPerPage > 0 ? games.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : games
                                        ).map((row: Game) => (
                                            <SimpleTableRow row={row} key={row.id}/>
                                        ))}
                                    {
                                        emptyRows > 0 && (
                                            <TableRow style={{height: 53 * emptyRows}}>
                                                <TableCell colSpan={6}/>
                                            </TableRow>
                                        )
                                    }
                                </TableBody>
                            </TransitionGroup>
                   </TableContainer>

The moment I add the TransitionGroup, the entire table headers and body becomes scattered.

How can I make this work? Thanks