How to enforce type checking for dynamic component registration and prop validation in TypeScript React?

Question

I have created a package, in this package, we have a global object globalRegister to store the id <-> Component mapping.

Developers can use add(id, Comp) function to register a new item to this global object. And use show(id, props) function to access the component with the props they want to inject.

When user call show function, I have two type checking want to achieve.

1. I want to check id has already exist in the globalRegister. If not, we should be able to see the red wavy line.
2. I want to check the props user input is compatible with globalRegister[id]

I think the second requirements is more important and hard to achieve. Can anyone give me some idea about how to implement this? Thanks!!

(Here is a simple use case example about my package and expectations I want to see)

// Package's code
import React from 'react';
const globalRegister: Record<string, React.FC> = {}

const add = (id: string, Comp: React.FC<any>) => {
    globalRegister[id] = Comp
};

const show = (id: string, props?: Record<string, unknown>) => { 
    // ...
};

// Application's code
type Props1 = {age: number; name: string;}
const Comp1 = (props: Props1) => {
    return <></>
}

add('id_1', Comp1);

show('id_1', {age: 1, name: 'abc'}) // Correct
show('id_2') // Expect error, as we haven't register `id_2` to globalRegister 
show('id_1', {age: 1, name: 'abc', wrongProp: 'abc'}) // Expect error, as the second parameter is incompatible with Comp1's props