Why is my styled component no longer accepting children?

Question

I have a StyledGrid component declared as follows:

import PropTypes from 'prop-types';

import styled from "styled-components";
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { colors, Theme } from '@material-ui/core';

const StyledGrid = styled(Grid)`
  ${({ theme }) => `
    && table {
      width: 100%;
    }
    && .k-grid-header {
      color: ${theme.palette.text.primary};
    }
    && th {
      padding: ${theme.spacing(1, 1)};
    }
    && td {
      padding: ${theme.spacing(0.75, 1)};

      &.k-hierarchy-cell>.k-icon {
        padding: 0 0;
      }
    }
  `}
`;

export default StyledGrid;

Here is an example of it in use:

               <StyledGrid
                style={{ height: "100%", overflow: "auto", cursor:'pointer' }}
                data={orderBy(fdata, sort)}
                sortable={{
                  mode: "multiple",
                }}
                sort={sort}
                onSortChange={(e) => {
                  setSort(e.sort);
                }}
                filterable={true}
                filter = {filter}
                onFilterChange={filterChange}
                onRowClick={(e: any) => handleRowClick(e)}
              >
                <GridToolbar>
                  <CardHeader className={classes.cardHeader}
                    title={patientListTitle}
                    // subheader="click a patient name for details"
                  />
                  <br/>
                  <div>
                    <button
                      title="Add new"
                      className="k-button k-primary"
                      onClick={() => handleEdit(null)}
                    >
                      Add New Patient
                    </button>
                  </div>
                </GridToolbar>

                <GridColumn
                      title="Badge"
                      width="80"
                      headerClassName={classes.gridHeaderEdit}
                      cell={CellWithQR({userProfile: userProfile,  type:"badge", handleAction: handleQR})}
                      filterable={false}
                />

                {gridConfig.columns.map((c: any, index: number) => {
                  return (
                    <GridColumn
                      key={`grid-${index}`}
                      {...c}
                    />
                  );
                })}

                <GridColumn
                  title="Invite"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile, type:"invite", handleAction: handleInvite})}
                  filterable={false}
                />
                
                <GridColumn
                  title="Edit"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile,  type:"edit", handleAction: handleEdit})}
                  filterable={false}
                />

                <GridColumn
                  title="Delete"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile,  type:"delete", handleAction: handleDelete})}
                  filterable={false}
                />

                {activeClinic.enableEndUserShare && <GridColumn
                  title="Shared"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile,  type:"share", handleAction: handleToggleShare, isShared: isShared})}
                />}    
              </StyledGrid>

it worked for a very long time until just a few minutes ago i was updating some packages so i deleted node_modules then ran npm install. Now it gives this error in every instance:

No overload matches this call.
  Overload 1 of 2, '(props: { filter?: CompositeFilterDescriptor | undefined; ref?: ((instance: Grid | null) => void) | RefObject<Grid> | null | undefined; ... 43 more ...; columnVirtualization?: boolean | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element[]; style: { fontSize: string; border: number; }; className: string; data: any; }' is not assignable to type 'IntrinsicAttributes & { filter?: CompositeFilterDescriptor | undefined; ref?: ((instance: Grid | null) => void) | RefObject<Grid> | null | undefined; ... 43 more ...; columnVirtualization?: boolean | undefined; } & { ...; } & { ...; }'.
      Property 'children' does not exist on type 'IntrinsicAttributes & { filter?: CompositeFilterDescriptor | undefined; ref?: ((instance: Grid | null) => void) | RefObject<Grid> | null | undefined; ... 43 more ...; columnVirtualization?: boolean | undefined; } & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof Grid, any, {}, never, typeof Grid, typeof Grid>): ReactElement<StyledComponentPropsWithAs<typeof Grid, any, {}, never, typeof Grid, typeof Grid>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: Element[]; style: { fontSize: string; border: number; }; className: string; data: any; }' is not assignable to type 'IntrinsicAttributes & { filter?: CompositeFilterDescriptor | undefined; ref?: ((instance: Grid | null) => void) | RefObject<Grid> | null | undefined; ... 43 more ...; columnVirtualization?: boolean | undefined; } & { ...; } & { ...; }'.
      Property 'children' does not exist on type 'IntrinsicAttributes & { filter?: CompositeFilterDescriptor | undefined; ref?: ((instance: Grid | null) => void) | RefObject<Grid> | null | undefined; ... 43 more ...; columnVirtualization?: boolean | undefined; } & { ...; } & { ...; }'.  TS2769

I am very confused by this, as my StyledGrid has been okay accepting children for years of use. Does anyone know how a new npm install could have caused this or how to fix the error??