Conditionally hide / show widget

I am using the latest instantsearch.js version.

I have three refinementLists.

  • Country
  • Region
  • Area

Currently all three widgets are visible.

I only want to show the Region list if a Country is selected and only show the Area list if a Region is selected, otherwise they should be hidden.

How might I do this? Thanks


const search = instantsearch({
indexName: ‘property’,
searchClient,
});

	search.addWidgets([
	  	instantsearch.widgets.searchBox({
	    	container: '#searchbox',
	  	}),		  	

	  	instantsearch.widgets.refinementList({
		 	container: '#country-container',
		  	attribute: 'Country'
		}),

		instantsearch.widgets.refinementList({
		 	container: '#region-container',
		  	attribute: 'Region',
		}),			

		instantsearch.widgets.refinementList({
		 	container: '#area-container',
		  	attribute: 'Area',
		}),	

	  	
	]);

	search.start();

Does anyone have any ideas? Thanks