Quiero mostrar todos los usuarios y el correo electrónico en una cuadrícula agrícola, pero nada de lo que hago parece funcionar. Estoy usando JavaScript para crear un portal de administración.

 import React from 'react'; import './users.css' import { useQuery, gql } from '@apollo/client'; import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-alpine.css'; const USER_QUERY = gql` { users { _id username email } } `; export default function Users() { const { data, loading, error } = useQuery(USER_QUERY); if (loading) return <p>loading...</p>; if (error) return <p>ERROR</p>; if (!data) return <p>Not found</p>; const [columnDefs] =[ { field: "username" }, { field: "email" }, ]; const [rowData] = data.users.map(user => { return ( { username: user.username, email: user.email, } ) } ); return ( <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}> <AgGridReact rowData={rowData} columnDefs={columnDefs}> </AgGridReact> </div> ); };

¿Algún consejo sobre lo que estoy haciendo mal? o cualquier solución para esto.