useMenu displays hits outside the facetFilter set in Configure

Open Q&A
, , ,
1

When a user selects a menu option, the hits displays all records with the selected category. But I expected it to display all records with the selected category & that are also “Type” “Article” which is set in . Am I misusing and how do I get useMenu to only display hits that are “Type” “Article” & the selected category?

<InstantSearch
      searchClient={searchClient}
      indexName={process.env.INDEX_NAME}
    >
      <Configure
        facetFilters={[
          `type: article`,         
        ]}
        hitsPerPage={20}
      />
         <CustomMenuSelect attribute={"categories.lvl0"} />
        ...
</InstantSearch>

export default function CustomMenuSelect(props) {
  const {items, refine} = useMenu(props);
  const {refine: clearRefine} = useClearRefinements(props);

  const handleOnInput = (e) => {
    const value = e.target.value;
    if (value === 'All Articles') {
      clearRefine();
    } else {
      refine(value);
    }
  };
 
  return (...)
}