Можно ли выводить данные из базы данных MySQL в @mui/x-data-grid? При запуске приложения появляется пустая страница

import { DataGrid } from '@mui/x-data-grid';
import { useEffect, useState } from 'react';
import mysql from 'mysql2';

function getCurators() {
  const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '*********',
    database: 'db_curators',
  });

  return new Promise((resolve, reject) => {
    connection.query('SELECT idCurator, Familiya, Imya, Otchestvo FROM curators', (error, results) => {
      if (error) {
        reject(error);
      } else {
        resolve(results);
      }

      connection.end();
    });
  });
}

function DataTable() {
  const [curators, setCurators] = useState([]);

  useEffect(() => {
    getCurators()
      .then((data) => setCurators(data))
      .catch((error) => console.log(error));
  }, []);

  const columns = [
    { field: 'idCurator', headerName: 'ID', width: 100 },
    { field: 'Familiya', headerName: 'Фамилия', width: 150 },
    { field: 'Imya', headerName: 'Имя', width: 150 },
    { field: 'Otchestvo', headerName: 'Отчество', width: 150 },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={curators} columns={columns} />
    </div>
  );
}

export default DataTable;