Unable to view Menu in InstantSearchJS

I am trying to use Menu Widget for plain vanilla Javascript. I have added addWidgets API as follows:

search.addWidgets([
    customSearchBox({
        container: document.querySelector('#searchbox'),
    }),

    customHits({
        container: document.querySelector('#hits'),
    }),

    customPagination({
        container: document.querySelector('#pagination'),
    }),

    customMenuSelect({
        container: document.querySelector('#menu-select'),
        attribute: 'main_language',
        limit: 25,
    }),

    instantsearch.widgets.menu({
      container: document.querySelector('#anothermenudiv'),
      attribute: 'main_language',
      templates: {
        showMoreText: `
          {{#isShowingMore}}
            Voir moins…
          {{/isShowingMore}}
          {{^isShowingMore}}
            Voir plus…
          {{/isShowingMore}}
          `,
      }
    }),

    instantsearch.widgets.configure({
        hitsPerPage: 12
    }),

]);

I am able to get data for rest of widgets except for menu widgets. ie. instantsearch.widgets.menu and customMenuSelect. I have also configured my index for the attribute main_language to Ordered here https://www.algolia.com/apps/<my-app>/explorer/configuration/<indice-name>/searchable-attributes.

Is there some other configuration missing from my end in order to fetch my custommain_language attribute?

Refer to my repo for full source code

Hi @ayman.patel97, have you set your main_language attribute as an attributeForFaceting? This will allow you to use it in a menu widget.