我正在使用React with TypeScript，并希望执行以下操作：

import React from 'react'
import styles from './SocialNetwork.module.scss'
import classNames from 'classnames'
import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome'

// Generic A doesn't work the way I want it to
export type SocialNetworkProps<A extends keyof JSX.IntrinsicElements> = FontAwesomeIconProps & {
  className?: string
  // I need that if a key from JSX.IntrinsicElements was transferred, then I pull the appropriate type of props from the same type, but already by key.
  as?: A | React.FC,
  asProps?: JSX.IntrinsicElements[A]
}

// In my approach, I need to pass the generic here, and I want it to depend on what the user passed in props
const SocialNetwork: React.FC<SocialNetworkProps> = ({ className, icon, as = 'a', asProps, ...rest }): JSX.Element => {
  const CostumTag = as

  return (
    <CostumTag className={classNames(styles.socialNetwork, className)}>
      <FontAwesomeIcon icon={icon} {...rest} />
    </CostumTag>
  )
}

export default SocialNetwork

我应该如何做，以便当as='div'或as='a'字段传递给组件时，asProps类型被拉为JSX.IntrinsicElements['a']？