Autocomplete closing modal

Hi! I have a question concerning autocomplete inside a popover modal. I’m implementing a system wherein a user can search in an autocomplete box in an index, and since I want to do some custom rendering once an item is selected, I have a local state monitoring what the user has selected. However, when the user selects something from the autocomplete, it closes both the panel and the underlying modal. Is there a way to prevent the entire underlying modal from closing while still preserving the functionality of closing the panel?

Relevant bits of code:

    if (!containerRef.current) {
      return undefined

    const search = autocomplete<Hit<T>>({
      classNames: {
        panel: "z-20",
        panelLayout: "!p-0",
        form: "!rounded !rounded-4 !h-10 border !shadow-none focus-within:!ring-1 !border-gray-200 dark:!border-gray-600 invalid:!border-red-400 focus-within:!border-cobalt-400 focus-within:!ring-cobalt-400 disabled:!border-gray-200 dark:!bg-gray-800 dark:invalid:!border-red-900 dark:focus-within:!border-cobalt-300 dark:focus-within:!ring-cobalt-300 dark:disabled:!border-gray-600 dark:disabled:!bg-gray-700 ",
          "!text-gray-600 placeholder:!text-gray-600 !text-base focus-within:!text-black disabled:!text-gray-500 dark:!text-gray-200 dark:placeholder:!text-gray-200  dark:focus-within:!text-white dark:disabled:!text-gray-300",
        inputWrapperPrefix: "!stroke-gray-600",
      renderer: { createElement, Fragment },
      render({ children }, root) {
        render(children as ReactElement, root)
      container: containerRef.current,
      getSources<T>({ query }) {
        if (!query) {
          return []

        return [
            sourceId: "products",
            getItems() {
              return getAlgoliaResults<T>({
                searchClient: getAlgoliaSearchClient(),
                queries: [
                    indexName: indexName,
                    params: {
                      filters: filters,
                      attributesToSnippet: ["name:10"],
                      snippetEllipsisText: "…",
            templates: {
              item({ item }) {
                return <div>{renderItem(item)}</div>
    return () => {
  }, [filters, placeholder, indexName, renderItem])

  return <div className={className} ref={containerRef} />

In a different file:

<Modal {...modalProps}>
                placeholder="Search products"

And finally in the file that contains the structure for the modal, which is open when a specific query on the route exists: