I'm facing an issue with the formatting of my simple table when trying to navigate to user.id. Is there a better approach to this or should I consider moving LinkToUser?
All styling has been removed to avoid any conflicts.
import styled from 'styled-components'
import { Link } from 'react-router-dom'
export const LinkToUser = styled(Link)`
`
export const StyledTable = styled.table`
`;
export const THead = styled.thead`
`;
export const TR = styled.tr`
`;
export const TBody = styled.tbody`
`;
export const TH = styled.th`
`;
export const TD = styled.td`
`;
<StyledTable>
<THead>
<TR>
<TH>{copy.tableHeaderA}</TH>
<TH>{copy.tableHeaderB}</TH>
<TH>{copy.tableHeaderC}</TH>
</TR>
</THead>
<TBody>
{fetchedUsersData?.map((user: Users) => (
<LinkToUser to={`/users/${user.id}`}>
<TR key={user.id}>
<TD>
<p>{user.username}</p>
</TD>
<TD>
<p>{user.name}</p>
</TD>
<TD>
<p>{user.company.name}</p>
</TD>
</TR>
</LinkToUser>
))}
</TBody>
</StyledTable >