Checkbox does not work with keys in React - reactjs

Question

I am writing a component where there are checkboxes. Using map I need to use keys in React. I created function that generates unique keys. But after that my checkboxes stop working properly. I cannot click some of them, some styles dissapear. Why is that going on? I thought keys are just such stuff needed for giving a unique id for React.
// generating id
export function uid(): string {
return (performance.now().toString(36) + Math.random().toString(16)).replace(/\./g, '');
}
// my component
export default function Table(props:ITable) {
if (props.loader) {
return <Loader />;
}
return (
<table className="table">
<thead>
<tr>
<th>
{props.actions.map((element) =>
element.onChangeAll &&
<Checkbox
key={uid()}
indeterminate
onChange={element.onChangeAll}
label={element.label}
disabled={props.columns.every((el) => el.disabled)}
/>)}
</th>
{props.headers.map((header) =>
<TableHeader
key={uid()}
header={header}
/>)}
{props.actions.map((element) =>
element.header &&
<th key={uid()}>{element.header}</th>)}
</tr>
</thead>
<tbody>
{props.columns.map((data) =>
<tr
className={classNames(
data.checked ? 'row-active' : 'row',
data.disabled && 'row-disabled'
)}
key={uid()}
>
<td>
{props.actions.map((element) =>
element.onChangeCheckbox &&
<Checkbox
onChange={element.onChangeCheckbox}
disabled={data.disabled}
checked={data.checked}
id={data.id.toString()}
key={uid()}
/>)}
</td>
{props.headers.map((header) =>
<TableRow
key={uid()}
columns={data}
header={header}
/>)}
{props.actions.map((element) =>
element.element &&
<td
key={uid()}
onClick={() => {
element.deleteRaw && element.deleteRaw(data.id);
element.openModal && element.openModal(data);
}}
>
{element.element}
</td>)}
</tr>
)}
</tbody>
</table>
);
}