Material UI TextField does not work with useForm when refactored out

Question

So I have a form, and here is one of the inputs:

The issue is the error never goes away even when I try to submit the form. So whats really weird is that it was working before with this old code (error goes away when user types into input and hits submit):

                `<FormControl sx={{ width: "100%" }}>
                  <MuiTextField
                    {...register("usernameNormal", {
                      required:
                        form.connections?.sftp?.loginType === "Normal" ||
                        !form.connections?.sftp?.loginType,
                    })}
                    id="username"
                    label="Username"
                    variant="outlined"
                    onChange={handleNormalUsernameChange}
                    value={form.connections?.sftp?.usernameNormal}
                    error={errors.usernameNormal}
                  ></MuiTextField>
                </FormControl>
                {errors.usernameNormal && (
                  <FormHelperText
                    style={{ marginTop: "-32px", color: "red" }}
                    id="component-error-text"
                  >
                    Username is a required field
                  </FormHelperText>
                )}`

But I'm trying to refactor our TextField into a shared component but for some reason no matter what I do the error always persists.

I got to the point where I literally just rendered the MuiTextField in a dummy component:

const TestTextField = (props) => { return <MuiTextField {...props} />; };

And then just rendered it the same, using my dummy component:

<FormControl sx={{ width: "100%" }}>
                      <TestTextField
                        {...register("usernameNormal", {
                          required:
                            form.connections?.sftp?.loginType === "Normal" ||
                            !form.connections?.sftp?.loginType,
                        })}
                        id="username"
                        label="Username"
                        variant="outlined"
                        onChange={handleNormalUsernameChange}
                        value={form.connections?.sftp?.usernameNormal}
                        error={errors.usernameNormal}
                      ></TestTextField>
                    </FormControl>
                    {errors.usernameNormal && (
                      <FormHelperText
                        style={{ marginTop: "-32px", color: "red" }}
                        id="component-error-text"
                      >
                        Username is a required field
                      </FormHelperText>
                    )}

And it still doesn't work...

Essentially, it works when I directly use the MuiTextField but when I replace it with my dummy TestTextField which literally just renders MuiTextField it doesn't work (error always persists)

We are using the useForm library to manage the errors and it looks like the error object is just never updated unless you directly use the MaterialUI TextField. This makes no sense to me.

Does anything stick out as obviously wrong here?