I have a material UI TextField element that keeps track of the latitude. The latitude should only be between -90 and 90 degrees. I have a unit test to enforce this, but when I try to update the value in the TextField element using userEvent.type, it is not currently updating. When I debug, the value for latitude is "1" the same as what I'm passing in with the entity.

The element I want to change:

<div>
  <TextField
  id="editor-latitude"
  label={"Latitude"}
  defaultValue={latitude}
  error={latitudeError !== ""}
  helperText={latitudeError}
  variant="standard"
  onChange={(e) => setLatitude(e.target.value)}
  InputProps={{
    endAdornment: 
    <InputAdornment position="end">degrees</InputAdornment>
    }}
    inputProps={{ "aria-label": "Latitude" }}
      data-testId="editor-latitude"
     />
</div>

The unit test:

describe("Test", () => {
const entity: MapEntity = {
        id: "1",
        latitude: 1,
    };
test.each([
            ["-91", true],
            ["-90", false],
            ["0", false],
            ["90", false],
            ["91", true],
            ["abc", true]
        ])("Latitude values test", async (val: string, error: boolean) => {
            const { queryByLabelText, queryByTestId } = render(<EntityEditor entities={[entity]} />);
            expect(queryByLabelText("edit entity")).toBeInTheDocument();
            queryByLabelText("edit entity")!.click();
            await waitFor(() => expect(queryByTestId("editor-dialog")).toBeInTheDocument());
            const latitude = queryByLabelText("Latitude");
            userEvent.type(latitude!, val);
            expect(latitude?.outerHTML.includes('aria-invalid="false"')).toBe(true);
            queryByLabelText("save")!.click();
            expect(latitude?.outerHTML.includes('aria-invalid="true"')).toBe(error);
        });

})

Things I've tried:

• changing userEvent.type to fireEvent.change
• clearing the latitude container first
• Wrapping user.type in a waitFor

Any help is appreciated!