I have made a Select tag which has default options in it :

Screen shot : https://i.stack.imgur.com/T85LV.png

so i have options listed here :

  const options = [
  { value: 'All categories', label: 'All categories' },
  { value: 'Basic', label: 'Basic' },
  { value: 'Premium', label: 'Premium' },
]

The filter function which is used to differentiate the ntf's :

async function filterCategory(cat) {
        var filterCat = [];
        setshowlist(false);
        if (cat !== "all") {
          filterCat = allTokens.filter(function (el) {
            if (connected) {
              return (
                el.tokendetails.tokenCategory === cat &&
                el.tokendetails.networkVersion ===
                providerChainID.toString()
              );
            } else {
              return el.tokendetails.tokenCategory === cat;         
            }
          });
          setexploreTokens(filterCat);
        } else {
          if (connected)  {
            filterCat = allTokens.filter(function (el) {
              return (
                el.tokendetails.networkVersion ===
                providerChainID.toString()
              );
            });
          } else {
            filterCat = allTokens;
            
          }
        }
        setexploreTokens(filterCat);
        setshowlist(true);
      }    

And the Select Dropdown part where i need to pass All categories or Basic or Premium from what i select :

<div className='dropdownSelect one'>
  <Select className='select1' styles={customStyles} menuContainerStyle={{'zIndex': 999}} 
   defaultValue={options[0]} options={options} onClick={filterCategory({options})}/>
</div>

The issue i am facing is on how to pass either "All Categories " , "Basic" , "Premium" from Select tag to that function filtercat and can filter the nfts ? can anyone guide me thru that ! Appreciate for your help !