reactdatagrid ReactDataGrid stickyGroupRows property causes UI issue when group contains 1 value

what edition are you using - enterprise
version for @inovua/reactdatagrid-enterprise - 4.5.1

Relevant code or config

import React, { useState, useCallback } from "react";
import ReactDataGrid from "@inovua/reactdatagrid-enterprise";
import "@inovua/reactdatagrid-enterprise/index.css";
const gridStyle = { minHeight: 400 };

const columns = [
  {
    name: "id",
    type: "number",
    defaultWidth: 80,
    groupBy: false,
    header: "Id",
    defaultVisible: false
  },
  { name: "name", defaultFlex: 1, header: "Name" },
  { name: "country", defaultWidth: 150, header: "Country" },
  { name: "city", defaultWidth: 150, header: "City" },
  { name: "age", defaultWidth: 100, type: "number", header: "Age" },
  { name: "email", defaultWidth: 150, defaultFlex: 1, header: "Email" }
];

const App = () => {
  const [people] = useState([
    {
      id: 1,
      name: "George",
      country: "UK",
      city: "London",
      age: 30,
      email: "[email protected]"
    },
    {
      id: 2,
      name: "Joe",
      country: "USA",
      city: "New York",
      age: 70,
      email: "[email protected]"
    },

    //
    // Workaround #1: It expands fine if there is more than 1 in the group by.
    //
    // {
    //   id: 3,
    //   name: "Peter",
    //   country: "UK",
    //   city: "York",
    //   age: 34,
    //   email: "[email protected]"
    // },

    {
      id: 4,
      name: "Fiona",
      country: "USA",
      city: "Orlando",
      age: 60,
      email: "[email protected]"
    }
  ]);

  const [defaultGroupBy] = useState(["country", "city"]);

  const [collapsedGroups, setCollapsedGroups] = useState(true);
  const [expandedGroups, setExpandedGroups] = useState({});

  const onGroupCollapseChange = useCallback((cGroups, eGroups) => {
    setCollapsedGroups(cGroups);
    setExpandedGroups(eGroups);
  }, []);

  return (
    <div>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        stickyGroupRows={true} // If this is removed there is no problem.
        defaultGroupBy={defaultGroupBy}
        columns={columns}
        dataSource={people}
        columnUserSelect={true}
        disableGroupByToolbar
        showGroupSummaryRow={true}
        onGroupCollapseChange={onGroupCollapseChange}
        collapsedGroups={collapsedGroups}
        expandedGroups={expandedGroups}
        groupColumn={{
          defaultWidth: 280,
          renderGroupValue: ({ value, data }) => {
            return (
              <React.Fragment>
                {value} {`(${data.array.length} person(s))`}
              </React.Fragment>
            );
          }
        }}
      />
    </div>
  );
};

export default () => <App />;

What you did: Expand 1st group by clicking chevron.

What happened: Another 'duplicate row' with the group heading and a down chevron appears.

Reproduction repository: See example here https://codesandbox.io/s/reactdatagrid-bxj4w?file=/src/App.js:1819-1834

Problem description:

It should show the next containing group (which should also still be collapsed). Instead you get a strange duplicate row which if you click on, vanishes revealing what you would expect from the first click.