dynamic React props composition in TypeScript

as-prop.tsx

type HeaderLinkProps<As extends ElementType> = { as?: As } & Omit<
  ComponentPropsWithoutRef<typeof s.a> & ComponentPropsWithoutRef<As>,
  "as"
>;
const HeaderLink = <As extends ElementType = "a">(
  props: HeaderLinkProps<As>
) => (
  <s.a
    sx={{
      color: "currentColor",
      textTransform: "lowercase",
      ":not(:last-of-type)": {
        marginRight: "1em",
      },
    }}
    {...props}
  />
);

type HeaderProps = { showHome?: boolean };
export const Header: React.FC<HeaderProps> = ({ showHome }) => (
  <header
    sx={{
      display: "flex",
      flexDirection: "row",
      flexWrap: "wrap",
    }}
  >
    {showHome && (
      <HeaderLink as={Link} to="/">
        haspar.us
      </HeaderLink>
    )}
    <div sx={{ flex: 1 }} />
    <nav>
      <HeaderLink href="https://github.com/hasparus">GitHub</HeaderLink>
      <HeaderLink href="https://twitter.com/hasparus">Twitter</HeaderLink>
    </nav>
  </header>
);