Chrome, Edge – Disable autofill / autocomplete for fields

One possible solution is to set a unique name attribute for every time <TextField> is rendered. For example:

<TextField
  {...textFieldProps}
  label={label}
  name={`${label}${Date()}`}
/>

The auto-fill and auto-complete behavior you are referencing is modern browsers trying to be “smart” and remember a user’s past inputs to save them time. You might have noticed this behavior while browsing the web where one text input “remembers” your input from a different site. When this occurs, it is because both elements have the same value for the name attribute. In your case, this “memory” behavior is not desired.

While this solution works, a new Date object is created on every render which is not ideal; however, Date is used because it assures a unique name down to the second. There are probably packages that create unique names in a more performant manner.