Why does the table rows increment on component re-render? - html

Question

I created a component that accepts a label and an array and then returns a table for displaying the data that was passed. But for some reason, whenever the component re-renders, the table rows increments because the data repeats and displays it again below the table. Here's my code...
import React from 'react';
interface Props {
labels: any[];
data: any[];
}
const sampleData = [
{
rowLabel: 'Fever',
key: 'key',
value: 'value',
},
{
rowLabel: 'Colds',
key: 'key',
value: 'value',
},
];
const Display: React.FC<Props> = ({ labels, data }: Props) => {
return (
<>
<table
style={{
direction: 'ltr',
width: '100%',
flexDirection: 'row',
}}
>
{labels.map((label, index) => (
<tr key={index} style={{ border: '2px solid #e8e8e9' }}>
<td style={{ border: '2px solid #e8e8e9', textAlign: 'center' }}>
{label}
</td>
{data.map((data) => {
return data.rowLabel === label ? (
<tr
key={index}
style={{
display: 'flex',
flexDirection: 'row',
borderInline: '1px solid #e8e8e9',
borderBottom: '1px solid #e8e8e9',
paddingLeft: '5px',
}}
>
<td
style={{
width: '50%',
textOverflow: 'ellipsis',
}}
>
{data.key}
</td>
<td
style={{
borderLeft: '2px solid #e8e8e9',
width: '50%',
textAlign: 'right',
paddingRight: '5px',
}}
>
{data.value}
</td>
</tr>
) : null;
})}
</tr>
))}
</table>
</>
);
};
export default Display;
And here is me calling the component
<Display
labels={['Fever','Colds']}
data={sampleData}
/>
Im still a noob and any help would be greatly appreciated, thank you!