Tengo el componente más simple que existe. Importé DataGrid de MaterialUI, hice una variable para las columnas y una variable para las filas, y llamé a DataGrid en la función de representación del componente de función. Ahora recibo una llamada de gancho no válida. He visto este error en StackOverflow, pero la gente usaba componentes de clase. Estoy usando componentes de función y no hay nada más dentro del componente. Sin embargo, recibo un error. ¿Cómo es esto posible? ¿Qué estoy haciendo mal?

 import React from 'react' import { DataGrid } from '@material-ui/data-grid' const columns = [ {field: 'something', headername: 'ID'}, {field: 'title', headername: 'Title', width: 300}, {field: 'body', headername: 'Body', width: 600} ] const rows = [ {id: 1, something: 'hello', title: 'title', body: 'body'} ] function DataTable() { return ( <div> <DataGrid rows={rows} columns={columns}/> </div> ) } export default DataTable