Invalid hook call with select

Question

Problem is called in ProductSort(), reason is onChange.
I am getting 'invalid hook call' but I have no idea how to rewrite the code to skip this problem.
Maybe you have some ideas?

I will be appreciate, if you will send some links with examples of applications on GraphQL and React.

 function ShowCategories(){
    
       const { loading, error, data } = useQuery( gql`
        query{
             categories{ name }
           }
        `);
    
        if (error) return `Error! ${error}`;
    
        if(loading){
          return(<option>Loading...</option>);
        } else{
          return(  data.categories.map( (category, index) => {
            return(<option key={index} value={index}> {category.name} </option>)}) );
        }
    
       }
    
    function ProductSort() {
    
        return(
          <form id="plpChooseCategory">
            <div className="field">
              <select onChange={ (event) => ShowCategories({name: event.target.value})}>
                {ShowCategories()}
              </select>
            </div>
          </form>
        )