React Native Array, Picker And Flatlist

Question

I'm developing an application using react-native in this application I declare an array to hold the details of the items. Using this array I managed to get data of all the objects inside of the array to a flat list but Instead of displaying all the objects in the array, I want to get certain items and their details to the FlatList using a dropdown picker and a button press one at a time.

This is the FlatList template that I used to get the array items to the FlatList

    const ListItem = ({ item, onSubtract, onAdd }) => (
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingVertical: 12,
          paddingHorizontal: 10,
          borderBottomWidth: 1,
          borderColor: "#ddd",
        }}>
    
        <View style={{ flexDirection: 'row',}}>
          <Text style={styles.cardText} >{item.name} </Text>
        </View>
    
        <View style={{ flexDirection: 'row',}}>
    
        <TouchableOpacity style={styles.icons}  onPress={onSubtract} >
        <FontAwesomeIcon style={styles.startIcon} icon={faMinusSquare} size={25} />
        </TouchableOpacity>
    
          <Text style={{color: '#fff',
                        fontSize: 16,
                        marginLeft: 5,
                        marginRight: 5,
                        fontFamily: 'Poppins-Medium',}} >{item.quantity}</Text>
          
          <TouchableOpacity style={styles.icons}  onPress={onSubtract} >
          <FontAwesomeIcon style={styles.startIcon} icon={faPlusSquare} size={25}  onPress={onAdd} />
          </TouchableOpacity>
          
    
        </View>
        
        <Text style={styles.cardText} > {Math.round((item.price * item.quantity) * 100) / 100} </Text>
        <Text style={styles.cardText}> {Math.round(((item.price * item.quantity) * 0.05) * 100) / 100} </Text>
      </View>
    );

This is the declared array and the functions

    const [quantity, setQuantity] = useState(0);
      const [selectedProduct, setSelectedProduct] = useState();
      const [products, setProducts] = React.useState([
        { _id: 1, name: 'Item 1', price: 300.00, tax: 0, quantity: quantity },
        { _id: 2, name: 'Item 2', price: 29.00, tax: 0, quantity: quantity },
        { _id: 3, name: 'Item 3', price: 200.00, tax: 0, quantity: quantity },
      ]);
    
    
      const onSubtract = (item, index) => {
        const nextProducts = [...products];
        nextProducts[index].quantity -= 1;
        setProducts(nextProducts);
      };
    
      const onAdd = (item, index) => {
        const nextProducts = [...products];
        nextProducts[index].quantity += 1;
        setProducts(nextProducts);
      };
    
      let totalQuantity = 0;
      let totalPrice = 0;
      let totalTax = 0;
      let totalPriceOfTheInvoice = 0;
      products.forEach((item) => {
        totalQuantity += item.quantity;
        totalPrice += item.quantity * item.price;
        totalTax += item.quantity * (item.price * 0.05);
        totalPriceOfTheInvoice = totalPrice + totalTax;
      });

return (
    <SafeAreaView style={{ flex: 1 }}>

      <View >
        <Picker
          style={{ color: '#fff' }}
          selectedValue={selectedProduct}
          onValueChange={setSelectedProduct}
        >
          {products.map(item => (
            <Picker.Item label={item.name} value={item._id} />
          ))}
        </Picker>
      </View>

      <Button title="getDetails" onPress={onSendSelectDetailsToFlatList} />


      <FlatList
        data={products}
        renderItem={({ item, index }) => (
          <ListItem
            item={item}
            onSubtract={() => onSubtract(item, index)}
            onAdd={() => onAdd(item, index)}
          />
        )}
        keyExtractor={(item) => item._id}
      />

    </SafeAreaView>
      );
    };

Above is the dropdown picker and the FlatList. In this code, all the array objects and details are displayed in the flat list. But instead of that, I want the select the array item name from the dropdown while using the selected item names' id after I want to display it with the button press function inside the flat list using the above ListItem template. Again while keeping the added array details I want to add another selected array of details to the flat list using the button press button. Is there any way to do it? I tried many methods but every time flat list displays the whole array.

Insted of displaying like this

I want to display like this using the dropdown picker