react-virtualized forceUpdateGrid method does not cause re-rendering with new data

Question

I use react-virtualized library,in particular , the 'List' component. ContactsList the component in which the list of contacts is rendered. ContactsList has the ability to filter contacts.There is a problem when I try to filter the list, namely the List component ceases to filter any data. Although filtered data is logged in the ContactsList component, that is, the filteredContacts array is not empty. In this regard, the question is, how can I get an updated list of content. In the official documentation for the library react-virtualized describes forceUpdateGrid method, but in my case, it didn't work.Perhaps someone knows how to make the List component display updated data.

    export const ContactsList = ({ headerRightSlot }: ListOfContactsProps) => {
    
    React.useEffect(() => {phoneNumbersListRef.current?.forceUpdateGrid()}[filteredContacts.length])
    
    const [filteredContacts, setFilteredContacts] = React.useState<ContactType[]>([]) 
    
    const phoneNumbersListRef = React.useRef<List>(null)
            
    const renderRow = ({ index, key, style, isScrolling }: RowRenderProps) => {

      const contact = filteredContacts[index]
      const margin = 5
      let position = 0
      if (selectedContactIndex !== undefined && index > selectedContactIndex) {
          position = index * (rowHeight + margin)}
 
         else {
              position = index * (rowHeight + margin)
            }
      const newStyle = { ...style, top: position }
            
        return (
            <div key={key} style={newStyle}>
            {contact && (<Contact
                            key={key}
                            contact={contact}
                            handleSubTitleClick={(state: unknown) => {
                              if (
                                typeof state === 'object' &&
                                state !== null &&
                                'isOpened' in state
                              ) {
                                if (state.isOpened) {
                                  setSelectContactIndex(undefined)
                                } else {
                                  setSelectContactIndex(index)
                                }
                              } else if (
                                typeof state === 'object' &&
                                state !== null &&
                                'offset' in state
                              ) {
                                if (typeof state.offset === 'number') {
                                  setOffset(state.offset)
                                }
                              }
                            }}
                            contentSlot={
                              <PhoneNumbersList phones={contact?.phones} contact={contact} />
                            }
                            rightSlot={
                              <>
                                <AddToFavorite contactId={contact?.id} />
                                <CallToContact contact={contact} />
                              </>
                            }
                          />
                        )}
                      </div>
}
          
return (
        <Panel className={panelClasses}>
          <Panel.Header
            withBackButton
            handleClickBackButton={() => send('back')}
            title={'Contact List'}
            rightSlot={headerRightSlot}
          />
    
          <Panel.Body className={listOfContactsClasses}>
            {Array.isArray(filteredContacts) && filteredContacts.length > 0 ? (
              <div style={{ height: '100%' }}>
                <AutoSizer>
                  {({ height, width }) => {
                    return (
                      <List
                        ref={phoneNumbersListRef}
                        width={width}
                        height={height}
                        rowHeight={rowHeight}
                        rowCount={rowCount}
                        rowRenderer={renderRow}
                        overscanRowCount={10}
                        style={{ paddingRight: 8 }}
                      />
                    )
                  }}
                </AutoSizer>
              </div>
            ) : (
             
              <Typography
                id={'title'}
                className={styles['search-list-no-results-title']}
                as={'caption'}
                decoration={'none'}
                tag={5}
                weight={1}>
                There are no suitable results
              </Typography>
            )}
          </Panel.Body>
        </Panel>
      )
                }