Update react context provider value using child component

I have created a provider that is doing API call and setting data inside provider using value

//context

export const ProductContext = createContext({
  loading: false,
  data: null,
});

export function useProductContext() {
  const context = useContext(ProductContext);

  return context;
}

//provider

export const ProductProvider = ({ children, id }) => {
    
    const { data, error, loading } = fetch({url},'id');

    const value = useMemo(
      () => ({
        data
      }),
      [data],
    );

    return (
      <ProductContext.Provider value={value}>
        {children}
      </ProductContext.Provider>
    );
  };

// component

const Card = (): JSX.Element => {
  const { data } = useProductContext();


  return (
    <StyledSection>
     <button onClick={}>fetch data with new params</button>
    </StyledSection>
  );
};

export default Card;

Here in component i want to fetch data when user click on button with different params