So I have a react component with input select, which is located in my header:

import { useState } from "react";
function ChangeCurrency(){
   const [selectValue, setSelectValue] = useState("USD");
   function changeSelectValue(event) {
     setSelectValue(event.target.value);
     }
    return (
      <select
        name="currencies"
        id="currencies"
        className={classes.changeCurrency}
        value={selectValue}
        onChange={changeSelectValue}
      >
        <option value="USD">$USD</option>
        <option value="GBP">£GBP</option>
        <option value="AUD">A$AUD</option>
        <option value="JPY">¥JPY</option>
        <option value="RUB">₽RUB</option>
      </select>
    );
}

and another component with products, which is in main content:

import Products from "./Products";
import {
  useQuery,
  gql,
} from "@apollo/client";
function ProductsAll(){
const GET_PRODUCTS = gql`
  query {
    category(input: { title: "all" }) {
      name
      products {
        id
        name
        gallery
       prices {
          currency {
            label
            symbol
          }
          amount
        }
      }
    }
  }
`;
      const{loading,error,data} = useQuery(GET_PRODUCTS)
      if(loading){
          return <div>loading...</div>
      }
      if(error){
          return<div>error..</div>
      }
      return (
        <Products data={data}/>
      );
    }
    export default ProductsAll;

I have a few categories so doing everything in one app.js isn`t an option( how can I update data of second element with select changing?