MUI Data Grid Premium single grouped row selection

TableTest.js

import React, { useState } from 'react';
import { DataGridPremium, useGridApiRef, useKeepGroupedColumnsHidden } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const TableTest = () => {
  const [selectionModel, setSelectionModel] = useState([]);
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  return (
    <DataGridPremium
      {...data}
      autoHeight
      checkboxSelection
      disableSelectionOnClick
      apiRef={apiRef}
      rowGroupingColumnMode="single"
      initialState={initialState}
      selectionModel={selectionModel}
      onSelectionModelChange={selectedItems => {
        if(selectedItems.length === 0) {
          setSelectionModel([]);
        }
        if(selectedItems.length < selectionModel.length) {
          let removedItems = selectionModel.filter(itm => !selectedItems.includes(itm));
          removedItems.map(id => {
            if(`${id}`.indexOf('auto-generated-row-') === 0) {
              // deselect group children
              let children = apiRef.current.getRowGroupChildren({groupId: id});
              selectedItems = selectedItems.filter(itm => !children.includes(itm));
            } else {
              // deselect parent
              let groupingColumn = apiRef.current.state.rowGrouping.model[0];
              if(apiRef.current.getRow(id)) {
                let childValue = apiRef.current.getRow(id)[groupingColumn];
                selectedItems = selectedItems.filter(itm => itm !== `auto-generated-row-${groupingColumn}/${childValue}`);
              }
            }
          })
        } else {
          selectedItems = selectedItems.flatMap(id => {
            if(`${id}`.indexOf('auto-generated-row-') === 0) {
              // select row group children
              let children = apiRef.current.getRowGroupChildren({groupId: id});
              return [...children, id];
            } else {
              return id;
            }
          })
        }
        // Set() removes duplicate rows
        setSelectionModel([...new Set(selectedItems)])
      }}
    />
  );
}

export default TableTest;

Your implementation is nice, the only problem is with the filters, when i apply some filters to the table, the row parent show me the number of elements inside the group with the filter applied, but at the moment of select the group your functionality select all the childrens without considerate the filter.

without filter:

With filter:

@jarrisoncano you are absolutely right I forgot to add that part. Unfortunately my project no longer needs this functionality so I haven't had time to do any updates to this. If you figure out a solution let me know though!

i just find a method in the documentiation for filter the childrens that match with the currentFilters

https://mui.com/x/react-data-grid/row-grouping/#get-the-rows-in-a-group