How to create dynamic nested amp accordion iterate issue

Question

I have to create a dynamic accordion in Google AMP pages using Ajax API call. Below is the response I am getting from API

{
topics: [
{
  title: "Fashion",
  slug: "fashion",
  id: 3,
  topic_icon:
    "https://img-static.popxo.com/manual-uploads/app_category_icons/fashion_category_ic.png",
  description:
    `"Do you eat, sleep and breathe fashion? 'Coz we do!\n` +
    'High street labels to local markets, to lesser-known online brands, we know where to find the trendiest stuff and how to style it right!"',
  sort_index: 1,
  sub_categories: [
    {
      title: "Latest Trends: Western",
      slug: "western-wear",
      id: 70,
      main_category_slug: "fashion",
      description: "Latest Trends: Western",
      further_sub_categories: [[Object], [Object], [Object], [Object]],
    },
    {
      title: "DIY Fashion",
      slug: "diy",
      id: 68,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [],
    },
    {
      title: "Accessories",
      slug: "accessories",
      id: 66,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [[Object], [Object], [Object]],
    },
    {
      title: "Latest Trends: Indian",
      slug: "indian-wear",
      id: 69,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [[Object]],
    },
    {
      title: "Celebrity Style",
      slug: "celeb-fashion",
      id: 67,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [],
    },
  ],
},
{
  title: "Beauty",
  slug: "beauty",
  id: 1,
  topic_icon:
    "https://img-static.popxo.com/manual-uploads/app_category_icons/beauty_category_ic.png",
  description:
    '"Conquer the world, one red lipstick at a time!\n' +
    `Are you looking for reliable makeup reviews? Tired of searching the internet for solutions to your beauty woes and coming up with nothing? Look no further! We've got expert answers to all your beauty problems in one place!"`,
  sort_index: 2,
  sub_categories: [
    {
      title: "Latest Trends: Western",
      slug: "western-wear",
      id: 70,
      main_category_slug: "fashion",
      description: "Latest Trends: Western",
      further_sub_categories: [[Object], [Object], [Object], [Object]],
    },
    {
      title: "DIY Fashion",
      slug: "diy",
      id: 68,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [],
    },
    {
      title: "Accessories",
      slug: "accessories",
      id: 66,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [[Object], [Object], [Object]],
    },
    {
      title: "Latest Trends: Indian",
      slug: "indian-wear",
      id: 69,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [[Object]],
    },
    {
      title: "Celebrity Style",
      slug: "celeb-fashion",
      id: 67,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [],
    },
  ],
},

]; }

Code in AMP HTML

{{~it.hamburgerData.topics :value:index}}
<amp-accordion expand-single-section>
  <section>
    <h2>{{=value.title}}</h2>
    <amp-list id="myList" src="{{=value.sub_categories}}" [is-layout-container]="true" binding="no">
      <template type="amp-mustache">
        <div>{{title}}</div>
      </template>
    </amp-list>
  </section>
</amp-accordion>
{{~}}

I want to create a dynamic hamburger menu in which I am using AMP accordion the topic array will be accordion value and sub_categories is a nested array for submenu. The accordion works properly but the amp-list tag does not work .someone please help me with this dynamic accordion or suggests some better way of implementing