Inside of the TextInputField have you tried deleting all of those methods controlling the input and just spreading the field on the component?

<Controller
      name="email"
      defaultValue=""
      control={control}
      render={({ field: { value, onChange }, fieldState: { error } }) => (
        <div className={styles.container}>
          <div
            className={combineClasses(
              styles.field,
              isFocused && styles.focus,
              error && styles.error
            )}
          >
            <input
              type="email"
              placeholder={placeholder}
              className={styles.input}
              {...field}
            />
            {isLoading && <Icon icon={faSpinner} spin />}
          </div>
          {error && <p className={styles.message}>{error.message}</p>}
        </div>
      )}
    />