Why does my Material-React-Table is so long to render?

Question

I want to create a Material-React-Table displaying around 150 lines with a 'table' editDisplayMode so users can access the inputs instantly (I find very annoying to click first on the cell with 'cell' editDisplayMode to be able to edit it), and with no pagination. The problem I noticed is that the display 'table' mode instead of 'cell' increases the rendering time by several seconds, at least in my code. It increases from about a second in 'cell' mode to over 4 seconds in 'table' mode.

I tried the virtualization of lines feature, but with it I have to wait a bit each time I scroll for the lines to render. Am I somehow doing something wrong? if not is there something to do about this? Here is a minimal example of my code with fake data to test it :

import {
    type MRT_ColumnDef,
    useMaterialReactTable,
    MaterialReactTable,
} from 'material-react-table';
import React, { useMemo, useState, useEffect } from 'react';

type StudentData = {
    commentary: string;
    insurance: string;
    lastResearchUpdate: string;
    foundInternshipDate: string;
    grade: string;
    year: string;
    name: string;
    firstName: string;
    hasFoundInternship: string;
};

const dataExample = {
    commentary: 'nice commentary',
    insurance: 'something',
    lastResearchUpdate: '2024-02-02',
    foundInternshipDate: '2024-02-06',
    grade: '3rd year',
    year: '2023',
    name: 'LastName',
    firstName: 'FirstName',
    hasFoundInternship: 'yes',
};

const StudentMonitoring = () => {
    const [data, setData] = useState<Array<StudentData>>([]);

    useEffect(() => {
        // the data is originally fetched here
        let fakeData = [];
        for (let i = 0; i < 150; i++) {
            fakeData.push(dataExample);
        }
        setData(fakeData);
    }, []);

    const tableColumns: MRT_ColumnDef<StudentData>[] = [
        {
            accessorKey: 'year',
            header: 'Year',
            enableEditing: false,
            muiTableBodyCellProps: {
                align: 'center',
            },
        },
        {
            accessorKey: 'grade',
            header: 'Grade',
            enableEditing: false,
        },
        {
            accessorKey: 'name',
            header: 'Name',
            enableEditing: false,
        },
        {
            accessorKey: 'firstName',
            header: 'First Name',
            enableEditing: false,
        },
        {
            accessorKey: 'hasFoundInternship',
            header: 'Has Found Internship',
            enableEditing: false,
        },
        {
            accessorKey: 'foundInternshipDate',
            header: 'Found date',
            enableEditing: false,
            muiTableBodyCellProps: {
                align: 'center',
            },
        },
        {
            accessorKey: 'commentary',
            header: 'Commentary',
        },
        {
            accessorKey: 'insurance',
            header: 'Insurance',
        },
        {
            accessorKey: 'lastResearchUpdate',
            header: 'Last Research',
            enableEditing: false,
            muiTableBodyCellProps: {
                align: 'center',
            },
        },
    ];

    const columns = useMemo<MRT_ColumnDef<StudentData>[]>(() => tableColumns, []);

    const table = useMaterialReactTable({
        columns,
        data,

        enablePagination: false,
        enableBottomToolbar: false,
        enableStickyHeader: true,
        enableColumnFilterModes: false,

        layoutMode: 'grid',
        enableEditing: true,
        editDisplayMode: 'table',

        muiEditTextFieldProps: {
            placeholder: 'Modify...',
            variant: 'outlined',
            multiline: true,
        },
    });

    return (
        <>
            <MaterialReactTable table={table} />
        </>
    );
};

export default StudentMonitoring;