useEffect(() => {
    if (!containerRef.current) {
      return undefined;
    }

    const search = autocomplete({
      container: containerRef.current,
      plugins: [recentSearchesPlugin],
      renderer: { createElement, Fragment, render: () => {} },
      render({ children }, root) {
        if (!panelRootRef.current || rootRef.current !== root) {
          rootRef.current = root;

          panelRootRef.current?.unmount();
          panelRootRef.current = createRoot(root);
        }
        panelRootRef.current.render(children);
      },
      renderNoResults({ state }, root) {
        if (!panelRootRef.current || rootRef.current !== root) {
          rootRef.current = root;

          panelRootRef.current?.unmount();
          panelRootRef.current = createRoot(root);
        }
        panelRootRef.current.render(
          <div className="p-3">No results for "{state.query}"</div>
        );
      },
      onSubmit: (event) => {
        event.preventDefault();
        console.log(event.currentTarget);
      },
      ...props,
    });

    return () => {
      search.destroy();
    };
  }, [props]);