I have a React MUI dialog using typescript. The ‘Close’ button is not working or closing the dialog.
Also I am not able to write anything in the textfield to edit. It seems readonly.Once edited the changes should reflect on the parent component .
Please help. I tried the code that are commented out but didn’t help.

 interface DialogProps {
      isOpen: boolean;
      //  onClose: () => void;  
      postData? : {    
        id: number;
        name: string;
        email: string; 
      }| null;
    }
    const DialogBox: React.FC<DialogProps> = ({ postData , isOpen}) => {
        const [open, setOpen] = React.useState(false);   
     
        const handleClickOpen = () => {
            setOpen(true);
          };
        
          const handleClose = () => {
            setOpen(false);
          };
    
    //  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    //     const { name, value } = event.target;
    //     setContact((prevState) => {
    //       return {
    //         ...prevState,
    //         [name]: value
    //       };
    //     });
    //   };
         
        return (
            <React.Fragment>        
            <Dialog
             open={isOpen}
            //  onClose={handleClose}        
              PaperProps={{
                component: 'form',
                onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
                  event.preventDefault();
                  const formData = new FormData(event.currentTarget);
                  const formJson = Object.fromEntries((formData as any).entries());
                  const email = formJson.email;
                  console.log(email);
                  handleClose();
                },
              }}
            >
              <DialogTitle>Dialog </DialogTitle>
              <DialogContent>
                <DialogContentText>
                 Edit Email address
                </DialogContentText>           
                <TextField
                  autoFocus
                  required
                  margin="dense"
                  id="name"
                  name="email"
                  label="Email Address"
                  type="email"
                  fullWidth
                  variant="standard" 
                  value = {postData?.email ?? ''}
                  // onChange={(e) => handleInputChange(e.target.value)} 
                  // onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                  //   setName(event.target.value);
                  // }}
                />
               {/* } */}
              </DialogContent>
              <DialogActions>
              <Button type="submit">Edit</Button>
              <Button  onClick={() => setOpen(false)}>Close</Button>            
              </DialogActions>
            </Dialog>        
            </React.Fragment>
          );
    }    
    export default DialogBox;

Parent

interface Post {    
    id: number;
    name: string ;
    email: string; 
  }
  
  export default function Parent()  {
    const [open, setOpen] = React.useState(false);
    const [posts, setPosts] = useState<Post | null>(null);
    const [error, setError] = useState<string | null>(null);

    const handleClickOpen = () => {
        setOpen(true);
      };
    
      const handleClose = () => {
        setOpen(false);
      };
   

    useEffect(() => {
      const fetchData = async () => {
        try {
          const response = await fetch('https://jsonplaceholder.typicode.com/users/1'); 
          if (!response.ok) {
            throw new Error('Failed to fetch post');
          }
          const data: Post = await response.json();
          setPosts(data);
        } catch (error) {
            if (typeof error === 'string') {
              setError(error);
            } else {
              setError('An error occurred while fetching data');
            }
          }
      };
  
      fetchData();
    }, []);
  
  
    return (
      <React.Fragment>
      <div>
        <h1>Profile</h1>
        {error && <div>Error: {error}</div>} 
        {posts && (
        <div>                 
          <p>Name: {posts.name}</p>
          <Divider/>
          <p>Email: {posts.email}</p>
        </div>
      )}
     
      <Button   onClick={handleClickOpen}>Edit</Button> 
      <DialogBox  isOpen={open} postData={posts}/> 
      </div>
      </React.Fragment>
    );

  };