This JSX tag’s ‘children’ prop expects type ‘never’ which requires multiple children, but only a single child was provided.ts(2745)

I am writing a component

Text

size

as

For

<StyledText>

This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.ts(2745)

And for

as

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "color" | "slot" | ... 252 more ... | "onTransitionEndCapture"> & { ...; } & StyledTextProps, "color" | ... 259 more ... | "align"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'string' is not assignable to type 'never'.ts(2769)

I have created a simplified example in Sandbox

Any pointers on what am I doing wrong or recommended reading is highly appreciated.

Also pasting the code below:

			
import React from "react";
import styled from "styled-components";

export interface TextProps {
  color?: "primary" | "secondary" | "primaryText" | "secondaryText" | "error";
  size?: "1" | "2" | "3" | "4" | "5" | "6" | "overline";
  weight?: "normal" | "bold" | "bolder" | "lighter" | "number";
  display?: "inline" | "block" | "inherit";
  align?: "left" | "right" | "center" | "justify" | "initial" | "inherit";
  children?: React.ReactNode;
}

interface StyledTextProps {
  size?: TextProps["size"];
  display?: TextProps["display"];
  {(props) => (props.display : `inherit`)};
  text-align: align ? props.{(props) => (props.weight : `normal`)};
`;

const sizeToHeading: Record<string, string> = {
  "0": "p",
  "1": "h1",
  "2": "h2",
  "3": "h3",
  "4": "h4",
  "5": "h5",
  "6": "h6"
};

export const Text = React.forwardRef<HTMLSpanElement, TextProps>(
  ({ ...props }, ref) => {
    return (
      <>
        <StyledText
          ref={ref}
          $size={props.size || "6"}
          as={props.size ? sizeToHeading[props.size] : "p"}
        >
          {props.children}
        </StyledText>
      </>
    );
  }
);