Как получить данные из выбранной строки в таблице React MUI Data-Grid с помощью Axios

Я пытаюсь использовать пример здесь, чтобы добавить функциональность selectedRow из @mui/x-data-grid для возврата всех данных из выбранной строки. В демонстрации они используют мод useDemoData для заполнения таблицы, тогда как я использую Axios для вызова моего API для заполнения строк и использования предварительно настроенных столбцов.

import React, { useState, useEffect } from 'react';
import axios from "axios";
import { DataGrid, GridToolbar } from '@mui/x-data-grid';

const columns = [
    { field: 'id', headerName: 'Job ID', width: 170 },
    { field: 'file_name', headerName: 'File Name', width: 250 },
    { field: 'product_type', headerName: 'Product Type', width: 300 },    
    { field: 'status', headerName: 'Status', width: 170, editable: true },
];  

function QueueMgrTable() {
    const [data, setData] = useState([]);
    const [loadingData, setLoadingData] = useState(true);
    const [selectedRows, setSelectedRows] = useState([]);

    async function getData() {
        await axios
            .get('https://myendpoint.com/test/jobs', {
            headers: {
                'Content-Type': 'application/json'
            }
            })
            .then((response) =>{
                var test_data = response.data.data;
                setData(
                    test_data.map((x) => {
                        return {
                            id: parseInt(`${x.job_id}`),
                            file_name: `${x.file_name}`,
                            product_type: `${x.product_type}`,
                            status: `${x.status}`
                        }
                    })
                );
                setLoadingData(false);
            });
    }  
     
    useEffect((data) => {
        console.info(config);
        getData();
        if (loadingData) {
            getData();
        }
    }, []);

    return (
        <div style = {{ height: 600, width: '100%' }}>
            {loadingData ? (
                <p>Loading. Please wait...</p>
        ) : (    
            <DataGrid
            columns = {columns}
            pageSize = {20}
            rowsPerPageOptions = {[10]}
            checkboxSelection
            components = {{ Toolbar: GridToolbar }}
            onSelectionModelChange = {(ids) => {
                const selectedIDs = new Set(ids);
                const selectedRows = data.rows.filter((row) =>
                    selectedIDs.has(row.id),
            );
            setSelectedRows(selectedRows);
            }}
            rows = {data}
            />
        )}
    
        <pre style = {{ fontSize: 10 }}>
            {JSON.stringify(selectedRows, null, 4)}
        </pre>
        </div>
    );
};

export default QueueMgrTable;

Когда я нажимаю на строку выше, я получаю следующую ошибку. Любые предложения или подсказки относительно того, что я делаю неправильно здесь? Я подозреваю, что он пытается использовать фильтр, когда data по какой-то причине не определен из-за состояния.