wait for fetchQuery - React Suspense

Question

I have a component which renders a spinner via <Suspense />. When this component mounts, a fetchQuery request is triggered via the useEffect hook like so:

const VisualComponent = () => {
  ...
  const [foo, setFoo] = useState(null);
  useEffect(() => {
    const fetchFoo = async () => {
      await getFoo().then((someBoolean) => {
        if (someBoolean && someOtherCondition) {
          setFoo(true);
        }
      });
    }
    fetchFoo();
  });
  
  return(<Suspense fallback={SomeLoader} />...</Suspense>)
};

and getFoo() calls fetchQuery:

const getFoo = async () => {
  let result;  
  await fetchQuery(...)
   .then((data) => {
     result = data;
   });
   return result;
};

For some reason, Suspense only shows loader when getFoo is fired via fetchFoo and stops showing the loader without waiting for fetchFoo to finish.

How can I make Suspense wait for fetchFoo to finish?