How to retrieve all hubsites and associated sites using SPFx and sp/PnP

I have the below code and this retrieves what I believe is all the hubsites in my tenant:

export const GetHubSites = async () => {
  const _sp = getSP();
  const finalArray: any[] = [];
  const hubsites: IHubSiteInfo[] = await _sp.hubSites(); //This seems to return all top level hubsites, but not all child hubsites??.
  console.log(hubsites, 'hubsites');

  await _sp.search({
    Querytext: `contentclass:STS_Site`,
    SelectProperties: ["Title", "SPSiteUrl", "WebTemplate", "SPWebUrl", "SiteName"],
    RefinementFilters: [`departmentid:string("{*",linguistics=off)`],
    RowLimit: 500,
    TrimDuplicates: false,

  })
    .then((r: SearchResults) => {

      console.log(r.RowCount, 'row count');
      console.log(r.PrimarySearchResults, 'r.PrimarySearchResults');
      r.PrimarySearchResults.forEach((value) => {
        finalArray.push(value)
      });
    })
    return finalArray;
}

How would I include all associated sites with this query above. My main aim is to create a grouped list of all hubsites and then expandable/collapsable associated sites.