Why are the results not displayed on request in the prop of the component based on the data of the array of objects?

Question

typescript

Good morning!
Yesterday I encountered the problem of fetching data on request in the prop of the component (when instead of displaying the required list of data on request, only an empty block is displayed where they should be displayed) and I still can’t figure out how to properly launch the same search engine.
An example of the component code in TypeScript, where I first encountered this problem:

import React, {Component} from 'react';
import { FlatList, Text, View } from 'react-native';
import { BottomTabNavigator, NavigationScreenProp } from 'react-navigation';
import { StoreListService }  from '../../services/stores/homepage/List';


interface CCScreenProps {
      navigation: NavigationScreenProp<any,any>,
      cat: any
}
export class CCScreen extends Component<CCScreenProps, object>{

  render(){
    let curQuery = {
      categoryId : this.props.cat
    }
    const productsList = new StoreListService('currentCategory',curQuery).eventStart();
    return (
      <React.Fragment>
        <View>
          <Text>{this.props.catName}</Text>
          <FlatList data={productsList} renderItem={({item}: {item: any}) => {
            return <Text onClick={() => props.navigation.navigate('CurrentProduct', {product: item.ID})}>{item.Product}</Text>
          }} keyExtractor={(item, index) => index.toString()} />
        </View>
      </React.Fragment>
    );
  }
}

The problem affected not only this component, but most of all - the logic, where everything is almost correctly implemented and everything should work. All problematic code examples are available in the comments to this question. How to fix the data sampling and searching error? Thank you in advance!