React Typescript component props type inferring

Question

I'm running into a typescript error where I'm rendering a list of components after having mapped some data to them, which is being passed down as props. The requirement is that I slightly mutate this data before rendering.

Below is the typescript part that I want to get right. I have a page which is made up of components in a specific order. I want to infer the type of the component props in this mapping, but having multiple potential component types seems to mess up the infer functionality:

// Define the component types
type ArticlePageComponent = typeof ArticleHeader | typeof ArticleSummary | typeof ArticleParticipants | typeof ArticleChapters | typeof ArticleBibliography | typeof ArticleAbout | typeof ArticleFootnotes | typeof ArticleImprint

// Infer component props from component
type ComponentProps<T> = T extends React.ComponentType<infer P> ? P : never

type ArticlePageComponentMap<T extends ArticlePageComponent> = {
  component: T
  props?: ComponentProps<T>
  href?: string
}
type ArticlePageComponents = ArticlePageComponentMap<ArticlePageComponent>[]

Below is a screenshot of my .tsx file and the error,:

I've tried all of the above, ChatGPT, common sense, etc.

Thanks in advance for your time!