I have a dialog with a bunch of TextFields populated by a JSON response form an API call. I have an issue where when I edit a TextField by adding or removing text, the dialog disappears and then reappears. This happens after any key on the keyboard is pressed while there is one TextField in focus. After the dialog reappears, the focus on the desired TextField is lost, but the added/removed character is persistent.

My code is quite long so I will only include a short example of my JSON response here. The rest of the code can be found in code sandbox.

My goal with this code is to open the Dialog from a Material-Table and populate the fields with data from the chosen row and allow the user edit data. In its current state, opening the dialog and populating the fields from the table works perfectly and is not included in the code sandbox for the sake of length.

My JSON response only contains one nested array which is not currently in use:

{
  "Domain": "Stack Overflow",
  "Experience": "SO",
  "SizingContact": "Ciaran Crowley",
  "SizingComments": "Test update 2",
  "expensetypes": [
    "Effort",
    "Other Opex - Other",
    "Other Opex - Sundry"
  ]
}