LadleCustomAddonComponent.tsx

export default function CustomAddon({ children, id }: PropsWithChildren<{ id: string }>) {
  const element =
    document.getElementById(id) ||
    (() => {
      const addonsContainer = document.querySelector(".ladle-addons > ul");
      const element = document.createElement("li");
      element.id = id;
      addonsContainer?.prepend(element);
      return element;
    })();
  return <>{createPortal(children, element)}</>;
}