How to get ais-Panel--noRefinement when using Panel with connectRefinementList - React

If I use panel with the native RefinementList the Panel displays the class .ais-Panel--noRefinement properly when there are no refineable results

<Panel>
	<div>Heading</div>
	<RefinementList attribute="vendor" operator="or"/>
</Panel>

The issue comes in when I use a customRefinementList

const RefinementList = ({ items, createURL }) => (
    <ul>
      {items.map(item => (
          <li key={item.label}>
            <a
                href={createURL(item.value)}
                style={{ fontWeight: item.isRefined ? 'bold' : '' }}
            >
              {item.label} ({item.count})
            </a>
          </li>
      ))}
    </ul>
);
const CustomRefinementList = connectRefinementList(RefinementList);
<Panel>
	<div>Heading</div>
	<CustomRefinementList attribute="vendor" />
</Panel>

Now, when there are no results, the Panel does not get the the .ais-Panel--noRefinement as expected.

Any help would be greatly appreciated.