I'm currently rewriting my datagrid component to us Material UI, all of my components so far are class components (due to project scope). One thing that I am at a standstill on is how to have the DataGrid have the first row selected by default. I already have a way to get the ID Of row and pass it down, but I am unsure how to implement that function in my project. I was looking at this as an example, but it is a functional component. https://material-ui-x.netlify.app/storybook/?path=/story/x-grid-tests-selection--api-pre-selected-rows&globals=measureEnabled:false

the apiRef in DataGrid uses UseGridApiRef with selectRow()/selectRows() . The problem is, that is a functional hook, and cannot be used in a class directly. What would be the best way for me to implement such a function in my current code? I found very minimal documentation on this specific topic with MUI's datagrid.

import React from 'react';
import {DataGrid} from "@mui/x-data-grid";

class UniversalDataGrid extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ownerDatabaseRows: [],
            ownerDatabaseColumns: this.props.displayColumns,
            selectionModel: [],
        };

    }

    componentDidMount() {
        if (this.props.sourceData !== 0) {
            let rowData = this.props.sourceData;
            this.setState({ownerDatabaseRows: rowData});
        }
    }

    rowSelectionData = (selectedRow) => {
        this.setState({selectionModel: selectedRow.row});
        this.props.onRowClick(selectedRow);         
    };


    render() {
        let headerHeight = this.props.headerHeight === 'default' ? 56 : this.props.headerHeight;
        let rowHeight = this.props.rowHeight !== "default" ? this.props.rowHeight : 56;
        return (
            <div style={{height: 200, width: '100%'}}>
                <DataGrid
                    columns={this.props.displayColumns}
                    rows={this.state.ownerDatabaseRows}
                    onRowClick={this.rowSelectionData}
                    hideFooter={this.props.hideFooter}
                    headerHeight={headerHeight}
                    rowHeight={rowHeight}
                />
            </div>
        );
    };


}

export default UniversalDataGrid;

I can easily pass another prop for the rowID to be selected by default, as there is code that runs wherever this component is called one level higher. I just need a way to use apiRef and UseGridApiRef. I've had very little experience with functional components, so I'm not sure how to proceed in this case.