React / Javascript return GraphQL query when loaded

Question

I'm a rookie in Javascript & React, but I've researched, tried & failed for x amount of days now - including taking an online course in Javascript.

import { useQuery } from "@apollo/client";
import React, { useEffect, useState, Suspense } from 'react'
import { GET_COLLECTIONS } from '../graphql/queries'
import { isEmpty, isNull } from 'lodash'
import { useNavigate } from 'react-router-dom'

async function FetchCollections() {
  let collections;

  //Perform the query to GraphQL API
  let { data, loading, error } = await useQuery(GET_COLLECTIONS);

  //When data is not empty we parse out collections in the response and returns it
  if (!isEmpty(data)) {
    collections = data.collections.collections;
    collections = JSON.parse(collections);
    return await collections;
  } else { console.log("FetchCollections / Waiting for respnse..") }
}

export const Collections = () => {
  const navigate = useNavigate();

  let collections;
  Promise.resolve(FetchCollections())
    .then(data => {
      collections = data;
    });

  let nodes;
  let relationships;

  const ref = React.useRef(null);
  useEffect(() => {
    if (!isEmpty(collections)) {
      nodes = collections.nodes;
      nodes = nodes.join() //Creates a string of the array
      console.log("Nodes fetched : " + nodes)
    }
  }, [collections, navigate])

  return (
    <>
      {console.log("Return : " + nodes)}
      test : {nodes}
    </>
  )
}

Console output:

Return : undefined
Nodes fetched : string1,string2,string3

How can I hold the return (test: {nodes}) until the nodes variable holds data?