API Callbacks onChangeSearchText - No data showing even there's a data

[mashwishi]

What I am trying here is to show the output of my search results

this is my reference for the search callback https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/search#onchangesearchtext

This is my component

import React, { useState } from 'react';
import { View } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import useContent2Store from '../../../store/useContent2Store';

const SearchBarMenu = ({}) => {

  const { ProductsStatus, fetchProducts } = useContent2Store((state) => state);

  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([]);

  return (
    <View className="z-50 flex-row items-center rounded-lg px-2 pt-4 pb-2">
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        categorySelectable={true}
        schema={{
          label: 'name',
          value: 'id',
          parent: 'context',
        }}
        loading={ProductsStatus?.loading}
        searchable={true}
        disableLocalSearch={true}
        searchPlaceholder="Search..."
        onChangeSearchText={(text) => {
          if (text && text?.length > 2) {
            fetchProducts({ searchTerm: text })
              .then((res) => {
                if (res.isSuccessful) {
                  setItems(res.searchResults)
                  console.log(res.searchResults)
                } else {
                  console.log(res.error)
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        }}
      />
    </View>
  )
};

export default SearchBarMenu;

This is the sample output from res.searchResults:

[
  {
    "appImageUrl": "https://dummyimage.com/200x200/C1C1C1/C1C1C1.jpg",
    "context": "Category A",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    "id": 29,
    "name": "Test 2",
    "price": 0,
    "tag": "Pages"
  },
  {
    "appImageUrl": "https://dummyimage.com/200x200/C1C1C1/C1C1C1.jpg",
    "context": "Category A",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    "id": 32,
    "name": "Test 1",
    "price": 0,
    "tag": "Pages"
  },
  {
    "appImageUrl": null,
    "context": "Category B",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
    "id": 2330,
    "name": "Test 3",
    "price": 0,
    "tag": "Products"
  }
]

As you can see that I used schema and this is my reference: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/item-schema#customize-the-schema

Preview:

Since I am already here asking, i would like to additionally add this question:

• is it possible instead of clicking the dropdown to search, why not just directly input then dropdown will show... if there's already option to that feature can you send me the right docs for that? If not, do you guys recommend other module for this one because I need a component that has input then it will show a dropdown when searched something that has group category support and image support.