Header/Filter row state issues with scrolling and hide options

[muhammad-usman-anwar]

• community
• @inovua/reactdatagrid-community: 4.5.7
• react: 16.14

Relevant code or config

<ReactDataGrid
            theme='default-dark'
            idProperty="id"
            columns={columns}
            dataSource={props.data ? createIds(sanitizeTimestampsFromResults(props.data)) : []}
            style={gridStyle}
            rowHeight={24}
            headerHeight={30}
            defaultFilterValue={filterValue}
            onRowClick={(rowProps) => {
                //console.log(rowProps.data?.optionSymbol);
                if (props?.onSymbolSelect)
                    props.onSymbolSelect(rowProps.data?.optionSymbol);
            }}
        />

What happened:

• On horizontal scroll, especially a bit fast makes the whole header row jumbled up
• On toggling between hide or show filter row, it nothing happens(in below image the row should have been hidden)

A single solution works for both of them for now, If I just do a bit horizontal scroll after the issue. It resets the state and both of them are fixed. It may be due to the state is not handled properly, or some part of my config is causing it to break(these behaviors should by default work irrespective of config)

I have spent a lot of time tinkering with configuration, but nothing seems to fix this, please look into it ASAP

[inovua-admin]

Please provide a reproduction repository on codesandbox.

[muhammad-usman-anwar]

ok will do