Query data is undefined for a bit and is then populated. How to use with React State?

  const query = trpc.multiply.useQuery(
    {
      numberOne: Number(numberOne),
      numberTwo: Number(numberTwo),
    },
    { enabled: false }
  );

  // it's intially undefined, but later isn't.  what's the best practice to handle this?
  const submit = async () => {
    query.refetch().then(() => {
      console.log(query);
      if (query.data) {
        console.log("success!");
        setProductResponse({
          product: query.data.product,
          isSuccess: query.isSuccess,
        });
      } else {
        console.log("failure!");
      }
    });
  };