Hierarchical Menu with Hooks

I am trying to implement a custom hierarchical menu using hooks, but I am having trouble getting the child categories to render. I have narrowed the problem down to the way I am passing in attributes through props. In the built-in HierarchicalMenu component, attributes are passed as an array of strings to the widget/component, and I have gotten this to work in my implementation. But, if I try to pass attributes to my CustomHierarchicalMenu the same way, I get an error when I try to expand a category in the menu: Error: The attributes option expects an array of strings.

I am using the template from the docs. The attributes prop is not destructured from the props object in the example from the docs. If I add attributes to the destructuring it returns undefined. If I pull attributes out of props outside of the useHierarchicalMenu destructuring, then I get an infinite loop .

// component on page with attributes passed as a prop (my implementation)

// custom hierarchical menu with hooks from docs:
import { useHierarchicalMenu } from 'react-instantsearch-hooks-web';
function CustomHierarchicalMenu(props) {
  const {
    attributes, // if I add this line here, attributes returns undefined when logged to the console
  } = useHierarchicalMenu(props);

  return <>{/* Your JSX */}</>;

Docs then show the following for setting attributes, but it is not clear how to then use hierarchicalMenuApi in my component.

const hierarchicalMenuApi = useHierarchicalMenu({
  attributes: [