My component's state doesn't update when using a callback function from child

Question

Parent Component

function SourcePlate() {
  const [isOpen, setIsOpen] = React.useState(false);


  const handlePlateClick = () => {
    setIsOpen(true);    
  }

  const handleDialogClose = () => {
    setIsOpen(false);
    console.log(isOpen);
  }

    return (
        <div onClick={handlePlateClick}>
          <AutoCompleteDialog isOpen={isOpen} handleClose={handleDialogClose} title='Upload Plate'></AutoCompleteDialog>
        </div>        
    )
}

Child Component

export const AutoCompleteDialog = ({
        isOpen,
        handleClose
    }) => {
    return (
        <>
            <Dialog
                fullWidth
                maxWidth='md'
                open={isOpen}
                onClose={handleClose}                
            >
                <DialogActions>
                    <Button onClick={handleClose}>Close</Button>
                </DialogActions>

            </Dialog>
        </>
    )
}

My component's state doesn't update when using a callback function from child.

When I click the close button my dialog doesn't close and my isOpen state doesn't update to false. What can I fix/change?