JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
Fiddle to demonstrate issue with hierarchical widget.<br />
<b>Men /// Shirts</b> is set as "default" category.<br />
When selection a new category from hierarchical widget, category "Men /// Shirts" is not overriden and filtering is done on top of two categories, instead of just one (the last selected one).

<br /><br />

<div>
  <input type="text" id="search-box" />
</div>

<br />

<strong>Current refinements:</strong>
<div id="current-refinements">
</div>
<br /><br />

<strong>Categories:</strong>
<div id="ais-categories"></div>
<br /><br />

<strong>Hits:</strong>
<div id="hits-container"></div>

JavaScript

var search = instantsearch({
  appId: 'Y0GJQYP2P4',
  apiKey: '0857228f7871c2e81c6e86135a14ddbd',
  indexName: 'magento_default_products', 
  searchParameters: {
    facetsRefinements: {
      'categories.level1': ['']
    }, 
    facets: ['categories.level1']
  }
});

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-box',
    placeholder: 'Search...'
  })
);

search.addWidget(
  instantsearch.widgets.currentRefinedValues({
    container: '#current-refinements'
  })
);
var hierarchical_levels = [];
for (var l = 0; l < 10; l++) {
	hierarchical_levels.push('categories.level' + l.toString());
}
          
search.addWidget(    
  instantsearch.widgets.hierarchicalMenu({        
    container: '#ais-categories',
    attributes: hierarchical_levels,
    separator: ' /// ',
    limit: 20,
    sortBy: ['name:asc']
  })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits-container',
    templates: {
      item: '{{name}}'
    }
  })
);

search.start();