Delete user using NEXT JS and mongo

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

import axios from "axios";
import { useMutation, useQueryClient } from "react-query";
import { deleteUser } from "../../controllers/users";

export default function DeleteUser({user_id}){
  const { isOpen, onOpen, onClose } = useDisclosure();

  const queryClient = useQueryClient();

  const mutation = useMutation(deleteUser,{
    onSuccess:()=>{
      queryClient.invalidateQueries("users");
    }
  })

  const cancelRef =React.useRef()

    const deleteRecord=async ()=>{
       await mutation.mutate({
        user_id:user_id
       })       
    }

    return(
        <>
         <AlertDialog
                isOpen={isOpen}
                leastDestructiveRef={cancelRef}
                onClose={onClose}>
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
              Delete Customer {user_id}
            </AlertDialogHeader>

            <AlertDialogBody>
              Are you sure? You can't undo this action afterwards.
            </AlertDialogBody>

            <AlertDialogFooter>
              <Button ref={cancelRef} onClick={onClose}>
                Cancel
              </Button>
              <Button colorScheme='red' onClick={deleteRecord} ml={3}>
                Delete
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>

      <Button colorScheme='red' size="xs" onClick={onOpen}>Delete</Button>
        </>
    )
}