How to set react-table column filter as sticky when scrolling vertically?

Question

I am working on react-table. I have an issue with the vertical scroll. When the table scroll's vertically the filter moves with the scroll. Is it possible to place a filter static, when scrolling vertically?

See this Image
Image 2

Table CSS

    .ReactTable .rt-tbody {
  overflow-x: hidden !important;
}

.ReactTable .rt-tbody {
  overflow: initial !important;
  position: sticky;
  /* overflow:initial !important; */
}

/* .ReactTable .rt-body {
  overflow: overlay;
} */

.ReactTable .rt-thead {
  overflow: hidden !important;
  position: sticky;
  z-index: 10;
}

.rt-thead {
  overflow-y: hidden !important;
  position: sticky !important;
}

I have basic knowledge in css. So i would appreciate it, if anyone can help. Table Code

const col =
            tableColumns &&
    tableColumns.map(({ key, header }) => {
                return {
                    Header: (
                        <Tooltip arrow title={header} placement="top">
                            <strong className={classes.head}>{header}</strong>
                        </Tooltip>
                    ),
                    headerStyle: {
                        fontSize: '16px',
                        backgroundColor: '#BEE4F3',
                        borderTop: 'solid 1px white ',
                        borderLeft: 'solid 1px white'
                    },
                    id: key,
                    accessor: key,
                    headValue: header,
                    Cell: row => {
                        const { row: row1 } = row;
                        const rowValue = row1[key];
                        return (
                            <div
                                style={{
                                    textAlign: 'center'
                                }}
                            >
                                {rowValue && rowValue}
                            </div>
                        );
                    },
                    width: 260,
                    Filter: () => (                       
                        <div                           
                            style={{ width: '100%', display: 'flex', alignItems: 'flex-end' }}                            
                        >
                            <TextField
                                onChange={e => {
                                    textFieldInputHandler(e, key);
                                    setColumnSearchValues({ key: e.target.value });                                    
                                }}                                
                                id={key}                               
                                placeholder="Search"
                                variant="outlined"
                                value={columnSearchValues[key]}                                
                            />
                            <Icon
                                id={key}
                                onClick={() => handleSearchButtonClick(key)}
                                Tooltip="Search"
                            >
                                search
                            </Icon>
                            <Icon onClick={() => clearColumnSearchValue(key)}>close</Icon>
                        </div>
                    )
                };
            });

Table components

<DraggableTable
                        id={id}                          
                        showPagination={false}
                        fixedCol={fixedCol}                          
                        filterable                            
                        rows={tableData}
                        columns={columns}
                        style={{                                
                            height: tableData ? tableData.length > 8 && 400 : 400,
                            width:
                                columns && columns.length === 0
                                    ? '60vw'
                                    : 
                                    columns && columns.length > 6
                                    ? '80vw'
                                    : ''
                            // ? columns.length * 170,
                        }}
                        getTrProps={(state, rowInfo) => {
                            return {
                                onClick: () => enableCellClick && onCellClick(rowInfo.original)
                            };
                        }}                            
                        className="-highlight -striped"
                        // eslint-disable-next-line react/jsx-boolean-value
                        resizable={true}
                        onDrag={onDrag}
                        noDataText="No data available"
                        minRows={tableData && tableData.length === 0 && 3}
                        dragged={dragged}                           
                    />