Hydration Mismatch with `solid-icons`

import { JSX, Show } from "solid-js";

type Props = {
  left?: JSX.Element;
  right?: JSX.Element;
  children: JSX.Element;
};

export const WithIcon = (props: Props) => {
  return (
    <div class="flex items-center justify-center space-x-4">
      <Show when={props.left}>
        <div>{props.left}</div>
      </Show>
      <div>{props.children}</div>
      <Show when={props.right}>
        <div>{props.right}</div>
      </Show>
    </div>
  );
};

<WithIcon right={<ImCross />}>Something</WithIcon>