Astroturf typescript is not compatible with function components

[paulcdejean]

  Type 'ComponentType<any> | keyof IntrinsicElements' is not assignable to type '"length" | "toString" | "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | "split" | "substring" | "toLowerCase" | ... 34 more ... | ComponentType<...>'.
    Type '"symbol"' is not assignable to type '"length" | "toString" | "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | "split" 
| "substring" | "toLowerCase" | ... 34 more ... | ComponentType<...>'.
      Type 'C' is not assignable to type 'FunctionComponent<any>'.
        Type 'ComponentType<any> | keyof IntrinsicElements' is not assignable to type 'FunctionComponent<any>'.
          Type 'string' is not assignable to type 'FunctionComponent<any>'.

89 > extends ForwardRefExoticBase<StyledComponentProps<C, O, A>> {

Code snippet:

import reactLogo from '@/ui/svgs/react.svg'
import viteLogo from '@/ui/svgs/vite.svg'
import styled from 'astroturf/react';

const Logo = styled('img')`
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
`;

function Example() {
  const [count, setCount] = React.useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <Logo src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <Logo src={reactLogo} className="logo react" alt="React logo" />
        </a>