Fixing types for mapping over object to create React components

I really like uing this pattern for rendering similar components and using a _type prop to distinguish it and pass it down to the correct component.

However, I've found it difficult to add in the types correctly and was wondering if you guys could help. I have some questions;

1. Is the BlockMap type correct?
2. What type should I be using for ResolvedBlock?
3. Or generally, is there a better way of writing the types (without changing this structure?)

    import React from 'react'
    import { ImageBlock } from '/ImageBlock' // Assume all components are imported from whereever
    
    type BlockType =
    | 'imageBlock'
    | 'formBlock'
    | 'statisticBlock'
    | 'videoBlock'
    | 'quoteBlock'
    
    interface Block {
      _type: BlockType
      _key: string
      heading?: string
      backgroundColor?: string
      theme?: 'dark' | 'light'
    }
    
    type BlockMap = Record<BlockType, JSX.Element> // Is this type correct?
    
     const blockMap:BlockMap = {
      imageBlock: ImageBlock,
      formBlock: FormBlock,
      statisticBlock: StatisticBlock,
      videoBlock: VideoBlock,
      quoteBlock: QuoteBlock,
    }
    
    interface Props {
      className?: string
      blocks: Block[]
    }
    
    export function BlocksBuilder({
      blocks = [],
      className = ``,
    }: Props):JSX.Element {
      return (
        <>
          {blocks.map(block => {
            const ResolvedBlock = blockMap[block._type] // What type should ResolvedBlock be?
            if (!ResolvedBlock) return null
    
            return (
                <ResolvedBlock
                  className={className}
                  block={block}
                  key={block._key}
                />
            )
          })}
        </>
      )
    }