Show all the users using NEXT JS mongodb

import React, { useState } from "react";

import Layout from "./public/layout";
import {
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,  
  TableContainer,
  Button,
  useDisclosure,
} from '@chakra-ui/react'


import DeleteUser from "../parts/Users/DeleteUser";
import EditUser from "../parts/Users/EditUser";

import {QueryClient, dehydrate, useQuery} from 'react-query';
import {getUsers} from "../controllers/users";

const Home=()=>{

    const { isLoading, data } = useQuery("users", getUsers);
 
  return(
    <>
    <Layout>         
      
      <TableContainer>
  <Table variant='simple'>    
    <Thead>
      <Tr>
        <Th>Name</Th>
        <Th>Email id</Th>
        <Th>Password</Th>
        <Th>User Type</Th>
        <Th>Action</Th>
      </Tr>
    </Thead>
    <Tbody>
      {data.map((user, index)=>{
        return(
          <Tr key={user._id}>
            <Td>{user.name}</Td>
            <Td>{user.email}</Td>
            <Td>{user.password}</Td>
            <Td>{user.role}</Td>
            <Td>
              <DeleteUser user_id={user._id} />
              <EditUser user_id={user._id}/>
            </Td>
          </Tr>
        )
      })}
    </Tbody>
  </Table>
</TableContainer>
    </Layout>
    </>
  )
}
export async function getServerSideProps(context){
  const queryClient=new QueryClient();
  await queryClient.prefetchQuery('users', getUsers);

  return{
    props:{
      dehydratedState: dehydrate(queryClient)
    }
  };
}
export default Home;