Dynamically display Topics/SubTopics in Community (experience cloud) Salesforce using LWC accordion

Question

I have a requirement, where I need to display Topics under my experience cloud.

I am getting close, currently I return empty values, can you help me what I am missing here? Check the image, this is how I want

One could query this topics using ConnectedAPI (which I have tried to use)

.html

<template>
    <lightning-card lwc:if={topic.data} title={name} icon-name="utility:knowledge_base">
        <div class="slds-m-around_medium">
            <lightning-button
                label="Expand All"
                onclick={expandAll}
                class="slds-m-around_medium">
            </lightning-button>
            <lightning-button
                label="Collapse All"
                onclick={collapseAll}
                class="slds-m-around_medium">
            </lightning-button>
        </div>



        <lightning-accordion allow-multiple-sections-open class="slds-m-around_medium" active-section-name={activeSections}>
            <lightning-accordion-section name="A" label={navigationTopics.data}>

                <p>
                    Related Article 1 - for Payment & Deliveries   <br/>                      
                    Related Article 2- for Payment & Deliveries   <br/>
                    .....  {recordId} <br/> 

                    
                    
                </p>


            </lightning-accordion-section>
            <lightning-accordion-section name="B" label="Notes On End Customer Support">

                    <p><lightning-formatted-url value="https://elopage.my.site.com/helpcenter/s/topic/{recordId}"  
                        label="Related Article 1 - for Payment & Deliveries " target="_blank" ></lightning-formatted-url></p>
                    <p><lightning-formatted-url value="https://elopage.my.site.com/helpcenter/s/topic/{recordId}"  
                        label="Related Article 2 - for Payment & Deliveries " target="_blank" ></lightning-formatted-url></p>    

            </lightning-accordion-section>
            <lightning-accordion-section name="C" label="Contact The Seller">
                <p>
                    Testing 7<br/>
                    Testing 8<br/>
                    Testing 9<br/>
 
                </p>
            </lightning-accordion-section>
        </lightning-accordion>
    </lightning-card>

</template>

.js

import { LightningElement, api, wire} from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';


import TOPIC_NAME from '@salesforce/schema/Topic.Name';
import getNavigationTopics from '@salesforce/apex/CustomAccordionLWC.getNavigationTopics';

const fields = [TOPIC_NAME]; 

export default class CustomAccordionLWC extends LightningElement {



 
// handling Topic header (parent)    
    @api recordId;
 
    @wire(getRecord, { recordId: '$recordId', fields })
    topic;

    get name() {
        return getFieldValue(this.topic.data, TOPIC_NAME);
    }

//
    @wire(getNavigationTopics)
    navigationTopics;

    get responseReceived(){
        if(this.navigationTopics){
            return true;
        }
        return false;
    }

 


// handling the button actions
    activeSections = [];

    expandAll() {

        this.activeSections = [ 'A', 'B', 'C' ];

    }

    collapseAll() {

        this.activeSections = [];
 
    }

}  

.cls

public with sharing class CustomAccordionLWC{
    @AuraEnabled(cacheable=true)
    public static List<ConnectApi.Topic> getNavigationTopics(){

        string commId = [Select Id from Network where Name = 'Payer Help Center'].Id;    
        ConnectApi.ManagedTopicCollection topics = ConnectApi.ManagedTopics.getManagedTopics(commId,ConnectApi.ManagedTopicType.Navigational,3);
        
        List<ConnectApi.Topic> topicList = new List<ConnectApi.Topic>();

        for (ConnectApi.ManagedTopic managedTopic : topics.managedTopics) {
            System.debug('###managedTopic.topic.name = ' + ((ConnectApi.Topic)managedTopic.topic).name);
        
            Set<String> topicNames = new Set<String>();
            for (ConnectApi.ManagedTopic childManagedTopic : managedTopic.children) {
                topicNames.add(((ConnectApi.Topic)childManagedTopic.topic).name + '\n');
            }
        
            System.debug('### childTopicNames:\n' + String.join(topicNames, '\n'));
        }
            return topicList; 
    }
            
}

enter image description here

Ideal Output expected - to show "Payment & Deliveries FAQ" ... or a list of all the subtopics atleast.