Atomic design typescript react

Question

import React from "react"
import styled, { css } from "styled-components"

import * as Router from "react-router-dom"

const styles = css`
  text-decoration: none;
  font-weight: 500;
  color: #0b0080;
  &:hover {
    text-decoration: underline;
  }
`

const StyledLink = styled(({ ...props }) => <Router.Link {...props} />)`
  ${styles};
`
const Anchor = styled.a`
  ${styles};
`
type LinkProps = {
  to: string | null
  href: string | null
  target?: string
}

export const Link: React.FunctionComponent<LinkProps> = ({ ...props }) => {
  const { to } = props
  if (to) {
    return <StyledLink {...props} />
  }

  return <Anchor {...props} />
}

Link.defaultProps = {
  to: null,
  href: null,
}

I am trying to use atomic design for my project & I am starting with my Link component It checks if there is a to prop to it renders a default the StyledLink component but It seems I am getting this error from the Anchor component

Overload 2 of 2, '(props: StyledComponentPropsWithAs<"a", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"a", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type '{ to: string | null; href: string | null; target?: string | undefined; children?: ReactNode; }' is not assignable to type 'Pick<Pick<Pick<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style" | ... 257 more ... | "rel"> & { ...; }, "ref" | ... 258 more ... | "rel"> & Partial<...>, "ref" | ... 258 more ... | "rel">'. Types of property 'href' are incompatible. Type 'string | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'. TS2769

Any ides whats's wrong?