Unable to click on button once dialog is opened and closed in React JS Material UI

Question

In my react I have two components in one component I have a table with action button delete and edit Steps where I producing issue:

1. when I click on delete button I am opening a dialog showing with some text
2. Next when click on close button or delete button I am closing popup dialog.
3. And next when trying again to click delete button then it is not opening the dialog. The delete action not working.

Customer Component with Table:

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import axios from "axios";
import { CUSTOMER_API_URL } from "../../utils/constants";
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import EditIcon from  '@mui/icons-material/Edit';
import DeleteIcon from  '@mui/icons-material/Delete';
import AddIcon from  '@mui/icons-material/Add';
import { Button } from "@mui/material";
import AddCustomer from "./AddCustomer";
import DeleteCustomer from "./DeleteCustomer";

const Customer = (props) => {

    const [customerData, setCustomerData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [addCustomerDialog, setAddCustomerDialog] = useState(false);
    const [showDelete, setShowDelete] = useState(false);
    const [showEdit, setShowEdit] = useState(false);
    const [customerId, setCustomerId] = useState();

    const handleAddCustomer = () => {
        setAddCustomerDialog(true);
    }

    const editCustomer = id => {
        setCustomerId(id);
        setShowEdit(true);
    }

    const deleteCustomer = id => {
        setCustomerId(id);
        setShowDelete(true);
    }

    useEffect(() => {
        setIsLoading(true);
        axios.get(CUSTOMER_API_URL.getUrl).then((response) => {
            console.log(response.data.data);
            if(response.status === 200) {
                setCustomerData(response.data.data);
            } else {
                console.log("Error getting data");
            }
        });
        setIsLoading(false);
    }, []);
    return (
        <React.Fragment>
            {
                isLoading ? 
                (<Box sx={{ display: 'flex' }} >
                    <CircularProgress />
                </Box>) : 
                (
                    <Box>
                        <div style={{ display: 'flex', justifyContent: "flex-end", marginBottom: 20 }}>
                            <Button variant="outlined" startIcon={<AddIcon />} onClick={handleAddCustomer}>Add Customer</Button>
                        </div>
                        <TableContainer component={Paper}>
                            <Table sx={{ minWidth: 650 }} aria-label="simple table">
                                <TableHead sx={{ fontWeight: 'bold', fontSize: 18 }}>
                                    <TableRow>
                                        <TableCell>Customer Name</TableCell>
                                        <TableCell>Phone Number</TableCell>
                                        <TableCell>Area</TableCell>
                                        <TableCell>City</TableCell>
                                        <TableCell>Last Purchase</TableCell>
                                        <TableCell>Actions</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                {customerData.map((row) => (
                                    <TableRow
                                    key={row._id}
                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                    >
                                        <TableCell>{row.firstName + row.lastName}</TableCell>
                                        <TableCell>{row.phoneNumber}</TableCell>
                                        <TableCell>{row.city}</TableCell>
                                        <TableCell>{row.state}</TableCell>
                                        <TableCell>{row.email}</TableCell>
                                        <TableCell>
                                            <IconButton aria-label="delete" onClick={() => editCustomer(row._id)}>
                                                <EditIcon />
                                            </IconButton>
                                            <IconButton aria-label="delete" onClick={() => deleteCustomer(row._id)}>
                                                <DeleteIcon />
                                            </IconButton>
                                        </TableCell>
                                    </TableRow>
                                ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                    </Box>
                )
            }
            { addCustomerDialog === true &&
                <AddCustomer />
            }
            {
                showDelete === true &&
                <DeleteCustomer delProps={customerId} />
            }
        </React.Fragment>
    )
}

export default Customer;```

Delete Dialog Component:  
```import React, { useState } from "react";
import { DialogContentText, styled } from '@mui/material'
import { 
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Button,
    IconButton,
    Typography
} from '@mui/material'
import Customer from "./Customers";

const DeleteCustomer = (props) => {

    const [open, setOpen] = useState(true);

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

    const handleDelete = () => {
        console.log("Perform Delete Action");
        setOpen(false);
    }

    return (
        <React.Fragment>
            <Dialog open={open} onClose={handleClose} >
                <DialogTitle>Delete Customer</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        Are you Sure to delete this customer? {props.delProps}
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose}>Cancel</Button>
                    <Button onClick={handleDelete}>Delete</Button>
                </DialogActions>
            </Dialog>
        </React.Fragment>
    )
}

export default DeleteCustomer;```