Cannot make the styled.svg typesafe

[khanakia]

I am trying to make the styled.svg typesafe i tried all different Props Types but it does not works at all

const StylePickerSvgIcon = styled.svg<{
  width?: string | number | undefined;
  height?: string | number | undefined;
}>`
  display: inline-block;
  width: ${(props) => (props.width ? props.width : '20px')};
  height: ${(props) => (props.height ? props.height : '20px')};
  user-select: none;
  margin-right: 8px;
  line-height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
`;

export function IconCloud(props: React.SVGProps<SVGSVGElement>) {
  return (
    <StylePickerSvgIcon fill='currentColor' viewBox='0 0 640 512' {...props}>
      <path
        fill='currentColor'
        d='M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z'></path>
    </StylePickerSvgIcon>
  );
}

It throws error

No overload matches this call.
  Overload 1 of 2, '(props: { string?: string | number | undefined; style?: CSSProperties | undefined; clipPath?: string | undefined; filter?: string | undefined; mask?: string | undefined; ... 473 more ...; css?: CSSProp; } & Partial<...> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element; className?: string | undefined; color?: string | undefined; height?: string | number | undefined; id?: string | undefined; lang?: string | undefined; max?: string | ... 1 more ... | undefined; ... 471 more ...; css?: CSSProp; }' is not assignable to type '{ string?: string | number | undefined; style?: CSSProperties | undefined; clipPath?: string | undefined; filter?: string | undefined; mask?: string | undefined; path?: string | undefined; ... 472 more ...; css?: CSSProp; }'.
      Types of property 'ref' are incompatible.
        Type 'LegacyRef<SVGSVGElement> | undefined' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.
          Type 'string' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"web", "svg", { width?: string | number | undefined; height?: string | number | undefined; }, never, "svg">): ReactElement<...>', gave the following error.
    Type '{ children: Element; className?: string | undefined; color?: string | undefined; height?: string | number | undefined; id?: string | undefined; lang?: string | undefined; max?: string | ... 1 more ... | undefined; ... 471 more ...; css?: CSSProp; }' is not assignable to type '{ string?: string | number | undefined; style?: CSSProperties | undefined; clipPath?: string | undefined; filter?: string | undefined; mask?: string | undefined; path?: string | undefined; ... 472 more ...; css?: CSSProp; }'.
      Types of property 'ref' are incompatible.
        Type 'LegacyRef<SVGSVGElement> | undefined' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.ts(2769)
const StylePickerSvgIcon: IStyledComponent<"web", "svg", {
    width?: string | number | undefined;
    height?: string | number | undefined;
}, never>