fix: let the field wire its own label association

Author: ricardogarim

apps/meteor/client/views/account/profile/AccountProfileForm.tsx

@@ -27,7 +27,7 @@ import {
 } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import type { AllHTMLAttributes, ChangeEvent } from 'react';
-import { useCallback, useEffect, useId, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
 import type { AccountProfileFormValues } from './getProfileInitialValues';
@@ -48,7 +48,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>) => {
 
 	const setPreferences = useEndpoint('POST', '/v1/users.setPreferences');
 	const statusVisibilityEnabled = useSetting('Accounts_StatusVisibility_Enabled', false);
-	const statusVisibilityDeniedId = useId();
 	const checkUsernameAvailability = useEndpoint('GET', '/v1/users.checkUsernameAvailability');
 	const sendConfirmationEmail = useEndpoint('POST', '/v1/users.sendConfirmationEmail');
 
@@ -291,14 +290,12 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>) => {
 				</Field>
 				{statusVisibilityEnabled && (
 					<Field>
-						<FieldLabel htmlFor={statusVisibilityDeniedId}>{t('Accounts_StatusVisibility_Denied_Own')}</FieldLabel>
+						<FieldLabel>{t('Accounts_StatusVisibility_Denied_Own')}</FieldLabel>
 						<FieldRow>
 							<Controller
 								control={control}
 								name='statusVisibilityDenied'
-								render={({ field: { onChange, value } }) => (
-									<UserAutoCompleteMultiple id={statusVisibilityDeniedId} value={value} onChange={onChange} />
-								)}
+								render={({ field: { onChange, value } }) => <UserAutoCompleteMultiple value={value} onChange={onChange} />}
 							/>
 						</FieldRow>
 						<FieldHint>{t('Accounts_StatusVisibility_Denied_Own_Description')}</FieldHint>