Use <label> HTML element when possible (#7609)

This PR:

- Uses `<label>` HTML elements when possible to represent labels
- Uses the new `useId()` React hook to get an identifier to link the
label with its input; it's more suitable than generating a UUID at every
render

Fixes #7281

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
 import { IconCheck, IconMinus } from 'twenty-ui';
-import { v4 } from 'uuid';
 
 export enum CheckboxVariant {
   Primary = 'primary',
@@ -165,7 +164,7 @@ export const Checkbox = ({
     setIsInternalChecked(event.target.checked ?? false);
   };
 
-  const checkboxId = 'checkbox' + v4();
+  const checkboxId = React.useId();
 
   return (
     <StyledInputContainer