Невозможно присвоить типу IntrinsicAttributes Ошибка tsx Typescript с компонентом, созданным из строки

Question

У меня есть следующий компонент Typescript:

import React from 'react'
import PropTypes from 'prop-types'

/**
 * @param {{
 *   children?: React.ReactNode | JSX.Element | string,
 *   as?: React.ElementType,
 *   with?: {},
 *   className?: string,
 *   ...props?: any
 * }} properties
 * @returns {JSX.Element}
 */
const Text = ({
  as: Component = 'span',
  children: template,
  className,
  with: vars,
  ...props
}) => {
  if (typeof template !== 'string') {
    throw new Error('Component children must be of type `string`')
  }

  const text = template.trim()
  className = className ? `notranslate ${className}` : 'notranslate'

  return (
    <Component
      className={className}
      {...props}
    >
      {text}
    </Component>
  )
}

export default Text

Однако над <Component есть красная волнистая линия, говорящая следующее:

Тип '{ children: any; className: any; }' не назначается набрать 'IntrinsicAttributes'. Свойство 'children' не существует в типе 'IntrinsicAttributes'.

Как заставить это работать?

Компонент должен использоваться следующим образом:

<Text as="p">hello world</Text>

Например.