useMenu() - clear all other refinements on refine()

Hi, I have a Collection Nav browser in my ecommerce that uses a Menu to refine results (there’s a SearchBox and a Sort).

But when a user clicks a menu item (collection), I don’t want it to carry the search query with it. Changing menu item should essentially reset the state, minus the selected collection.

I’ve tried clearing then refining, but causes it to spaz and infinite loop.

  const Menu = () => {
    const { refine, createURL } = useMenu({ attribute: "collections" })
    const { refine: clear } = useClearRefinements({ excludedAttributes: ["collections"] })
  }

  const handleClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    handle: string
  ) => {
    e.preventDefault()
    clear()
    refine(handle)
  }

Any tips would be awesome