I am building a react app using mui, but I can’t get the inputs from my TextFields when they are inside a Modal. When I type they basically lose focus after one character. The example in the mui site only show how to manage a single TextField https://mui.com/components/dialogs/#form-dialogs . Is there a way to use more than one? My code:
<Dialog
open={openCreateSheet}
onClose={handleCloseCreateSheet}
disableEnforceFocus
>
<DialogContent>
<CreateSheetBox>
<DialogContentText>
Fill in the blanks to generate a new work
</DialogContentText>
<TextField
label="Nome"
variant="outlined"
value={sheetName}
onChange={(e) => setSheetName(e.target.value)}
/>
<TextField
label="Location"
variant="outlined"
value={sheetLocation}
onChange={(e) => setSheetLocation(e.target.value)}
/>
</CreateSheetBox>
</DialogContent>
<DialogActions
sx={{
display: "flex",
justifyContent: "center",
}}
>
<Button
variant="contained"
onClick={addSheet}
color={"secondary"}
>
Add Sheet
</Button>
</DialogActions>
</Dialog>```