Hydration mismatch (SolidStart)

import { ComponentProps } from "solid-js";
import { Portal } from "solid-js/web";

interface BreadcrumbsPortalProps extends ComponentProps<typeof Portal> {
}

export function BreadcrumbsPortal({ children, ...props }: BreadcrumbsPortalProps) {
  return <Portal {...props} mount={document.getElementById("breadcrumb")!}>
    {children}
  </Portal>
}

<BreadcrumbsPortal>
  <Breadcrumbs>
    <ol class="inline-flex items-center">
      <li class="inline-flex items-center">
        <Breadcrumbs.Link href="/" class="font-medium text-white">
          Home
        </Breadcrumbs.Link>
        <Breadcrumbs.Separator class="inline-block text-gray-300 mx-1"/>
      </li>
      <li class="inline-flex items-center">
        <Breadcrumbs.Link href="/components" class="font-medium text-white">
          Components
        </Breadcrumbs.Link>
        <Breadcrumbs.Separator class="inline-block text-gray-300 mx-1"/>
      </li>
      <li class="inline-flex items-center">
        <Breadcrumbs.Link current class="font-medium text-white">
          Breadcrumbs
        </Breadcrumbs.Link>
      </li>
    </ol>
  </Breadcrumbs>
</BreadcrumbsPortal>