Chakra UI Overlay Alert Dialog

// App.js

import React from 'react';
import {
  ChakraProvider,
  CSSReset, Box, Container
}
  from '@chakra-ui/react';
import AlertDialog from './AlertDialog';

function App() {
  return (
    <ChakraProvider>
      <CSSReset />
      <Container maxW="container.sm" mt={10}>
        <Box>
          <AlertDialog />
        </Box>
      </Container>
    </ChakraProvider>
  );
}

export default App;

// AlertDialog.js

import React, { useState, useRef } from "react";
import {
    Button,
    AlertDialog,
    AlertDialogBody,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogContent,
    AlertDialogOverlay,
} from "@chakra-ui/react";

const DeleteButtonWithConfirmation = () => {
    const [isOpen, setIsOpen] = useState(false);
    const cancelRef = useRef();

    const handleDelete = () => {
        // Write functionality according to the
        // function requirements
    };

    const onOpen = () => setIsOpen(true);
    const onClose = () => setIsOpen(false);

    return (
        <>
            <Button colorScheme="red" onClick={onOpen}>
                Delete
            </Button>

            <AlertDialog
                isOpen={isOpen}
                leastDestructiveRef={cancelRef}
                onClose={onClose}
            >
                <AlertDialogOverlay>
                    <AlertDialogContent>
                        <AlertDialogHeader fontSize="lg" fontWeight="bold">
                            Delete Item
                        </AlertDialogHeader>

                        <AlertDialogBody>
                            Are you sure you want to delete this item? This
                            action cannot be undone.
                        </AlertDialogBody>

                        <AlertDialogFooter>
                            <Button ref={cancelRef} onClick={onClose}>
                                Cancel
                            </Button>
                            <Button
                                colorScheme="red"
                                onClick={handleDelete}
                                ml={3}
                            >
                                Delete
                            </Button>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialogOverlay>
            </AlertDialog>
        </>
    );
};

export default DeleteButtonWithConfirmation;