function UserList() {
  const [isDialogOpen, setIsDialogOpen] = useState(false)

  return (
    <>
      <Box sx={{ mb: 2 }}>
        {!isDialogOpen && (
          <Button
            variant="contained"
            color="primary"
            onClick={() => {
              setSelectedUser(null)
              setIsDialogOpen(true)
            }}
          >
            Add User
          </Button>
        )}
      </Box>
      {isDialogOpen && (
        <UserForm
          user={selectedUser}
          onSave={(updatedUser) => {
            handleUserSave(updatedUser)
            // Reset selected user
            setSelectedUser(null)
            // Close the dialog
            setIsDialogOpen(false)
          }}
          onCancel={() => setIsDialogOpen(false)}
        />
      )}
      <Table>
        <TableHead>
...

...
function UserForm({
  user,
  onSave,
  onCancel,
}:
...
const handleSubmit = (e: React.FormEvent) => {
...

 return (
    <Paper elevation={8}>
      <Box sx={{ p: 2 }}>
        <Typography variant="h6" component="h2" sx={{ mb: 2 }}>
          {user ? 'Edit User' : 'Add User'}
        </Typography>
        <form onSubmit={handleSubmit}>
          <TextField
...
          <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 2 }}>
            <Button type="button" onClick={onCancel}>
              Cancel
            </Button>
            <Button type="submit" color="primary" variant="contained">
              Save
            </Button>
          </Box>
        </form>
      </Box>
    </Paper>