Как компоненту Material UI установить id и получить его в обработчике события?

Я в проекте использую Material UI React. И решил установить компоненту FieldText id='firstName' и использовать его. При клике id равен de2e8a5b-7aab-4cb4-91bf-31817b6307e6.
Пример компонента:

<Box className={classes.boxContainer}>
          <TextField
            id='firstName'
            error={firstName !== '' && !firstNameValidationResult.valid}
            helperText={firstNameValidationResult.errors[0]}
            onChange={(event) => {
              return test(event, id);
            }}
            margin='normal'
            label={ETitleUser.firstName}
            inputProps={{ maxLength: 20 }}
            defaultValue=''
          />
          <TextField
            id='dept'
            error={dept !== '' && !deptValidationResult.valid}
            helperText={deptValidationResult.errors[0]}
            onChange={() => {
              return handlerOnChange;
            }}
            margin='normal'
            label={ETitleUser.dept}
            inputProps={{ maxLength: 20 }}
            defaultValue=''
          />
</Box>

Функция, где я хочу получить id=''firstName":

const handlerOnChange = (
    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
    id: string
  ) => {
    switch (id) {
      case 'firstName':
        setFirstName(event.target.value);
        break;
      case 'lastName':
        setLastName(event.target.value);
        break;
      case 'dept':
        setDept(event.target.value);
        break;
      case 'login':
        setLogin(event.target.value);
        break;
    }
  };

Возможно ли установить id компоненту и обратиться к нему? Или в Material UI из-за того что компоненты инкапсулированы id не будут работать?