Wrap a custom widget in a panel

I created a custom HierarchicalMenu using the connectHierarchicalMenu connector.
That worked well. But I wanted to wrap that custom widget into a panel. I followed along how I was doing that when I was using the HierarchicalMenu directly but it throws an error about not finding the container. (see below)

const renderHierarchicalMenu = (renderOptions, isFirstRender) => { 

 const {
    items,
    isShowingMore,
    refine,
    toggleShowMore,
    createURL,
    widgetParams,
  } = renderOptions;

 if (isFirstRender) {
    
// <<<<<< ERROR  >>>>>>>>
    const rootElem = document.querySelector(widgetParams.container); 

     ...
    
  }

 // rest of implementation removed for brevity
}

// Create the custom widget
const customHierarchicalMenu = instantsearch.connectors.connectHierarchicalMenu(
  renderHierarchicalMenu
);

const HMWithPanel =  instantsearch.widgets.panel({
  collapsed: true,
  templates: {
    header: `Categories`,
  },
})(customHierarchicalMenu);
// (instantsearch.widgets.hierarchicalMenu)

 search.addWidgets([
     HMWithPanel({
        container: '#categories',
        attributes: [
          'categories.lvl0',
          'categories.lvl1',
          'categories.lvl2'
        ],
        showParentLevel: false
  
      }),
])

The error is:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[object HTMLDivElement]' is not a valid selector.
  

When I console log the widgetParams object, I see the container is a div and not the container I pass into the panel #categories

{container: div, attributes: Array(3), showParentLevel: false, limit: 15}attributes: Array(3)0: "categories.lvl0"1: "categories.lvl1"2: "categories.lvl2"length: 3[[Prototype]]: }

How can I achieve what I want?

Anyone? Any thoughts?