Edit user details using NEXT JS and mongo

import { Button, useDisclosure } from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
  } from '@chakra-ui/react'

  import {
    FormControl,
    FormLabel,
    FormErrorMessage,
    FormHelperText,
    Input,
    Container
  } from '@chakra-ui/react'
import { useMutation, useQuery, useQueryClient } from "react-query";
import { editUser, getSingleUserById } from "../../controllers/users";

export default function EditUser({user_id}){
  const { isOpen, onOpen, onClose } = useDisclosure();
  const cancelRef =React.useRef()
  const queryClient= useQueryClient();
  const [form, setForm]=useState({
    name:"",
    email:"",
    password:"",
    cpassword:""
});

 const {isLoading, data, isError, isSuccess}= useQuery(["user", user_id],()=>getSingleUserById(user_id),{
  onSuccess:(data)=>{
    setForm({
      ...form,
      name:data?.user?.name,
      email:data?.user?.email,
      password:data?.user?.password,
    })        
  }
 })



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



const submitForm=async()=>{  
  await mutation.mutate({
      user_id: user_id,
      name: form.name,
      email: form.email,
      password: form.password
    });
}


if(isLoading){
  return "";
}
if(isError){
  return "Something wrong";
}

    return(
        <>
          <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            
          <FormControl>
                    <FormLabel>Name</FormLabel>
                    <Input type='text' defaultValue={form.name}  onChange={e=>setForm({...form, name:e.target.value})} />                    
                </FormControl>
                <FormControl>
                    <FormLabel>Email address</FormLabel>
                    <Input type='email' defaultValue={form.email} onChange={e=>setForm({...form, email:e.target.value})} />
                    <FormHelperText>We'll never share your email.</FormHelperText>
                </FormControl>

                <FormControl>
                    <FormLabel>Password</FormLabel>
                    <Input type='password' defaultValue={form.password} onChange={e=>setForm({...form, password:e.target.value})} />                    
                </FormControl>

                <FormControl>
                    <FormLabel>Confirm password</FormLabel>
                    <Input type='password' defaultValue={form.password} onChange={e=>setForm({...form, cpassword:e.target.value})} />                    
                </FormControl>

                <Button 
                onClick={submitForm}
                colorScheme='blue' my={3}>Update</Button>

          </ModalBody>

          <ModalFooter>
            <Button colorScheme='blue' mr={3} onClick={onClose}>
              Close
            </Button>            
          </ModalFooter>
        </ModalContent>
      </Modal>

      <Button colorScheme='blue' size="xs" onClick={onOpen}>Edit</Button>
        </>
    )
}