Hide generic type prop on export

I have a small set of components in which a Wrapper is going to manipulate its children (therefore referred to as Components by injecting a prop into each of the children via cloneElement.
The gotcha here is that Component props are of a generic type. When I expose Component on the code, I don't want one of its props to be on the signature, because it will be automatically injected by the Wrapper component.
I have a concise example which shows what I mean:

types.ts

export type SomeObject = {
  someKey: string;
};

type PropThatWillBeInjected<T extends SomeObject> = {
  fn: (value: string) => T;
};

export type WannaBePropTypes = {
  name: string;
};

export type PropTypes<T extends SomeObject> = PropThatWillBeInjected<T> &
  WannaBePropTypes;

Important: PropTypes<T> is what Component expects, but as a programmer, I want WannaBePropTypes to be the signature of this component.
Moving on...

Component.tsx

function Component<T extends SomeObject>(props: PropTypes<T>) {
  const { fn, name } = props;
  const result = fn(name);
  return <div>Hello, {result.someKey}</div>;
}

export default Component;

Wrapper.tsx

function Wrapper(props: { children: ReactNode }) {
  const { children } = props;
  return (
    <div id="wrapper">
      {React.Children.map(
        children as ReactElement<PropTypes<SomeObject>>,
        (child, index) =>
          cloneElement(child, {
            ...child.props,
            fn: (value: string) => ({
              someKey: `${value}-${index}`,
            }),
          })
      )}
    </div>
  );
}

export default Wrapper;

As expected, when I try to use these components as the following, the code works but the compiler complains:

<Wrapper>
  <Component name="Alice" />
  <Component name="Bob" />
</Wrapper>

> Property 'fn' is missing in type '{ name: string; }' but required in type 'PropThatWillBeInjected<SomeObject>'.(2741)

Is there a way to cast Component so I don't need to pass fn manually? I know there's a way when the prop types is not generic...

What I've tried:

1. Making fn optional: works, but this is not the solution I'm looking for;
2. Wrapping Component with another component and passing a noop to Component: works, but I don't want to create this unnecessary wrapper;

A playground with this sample code: StackBlitz

If I inderstand your problem correctly, you want to call Component as <Component name="Alice" /> and there should be some internal logic for two cases: when fn was passed and when not. If so, you can create unnecessary type (instead of unnecessary wrapper) which will be one of WannaBePropTypes or full props. This is like some combination of your try#1 and try#2:

type FullProps<T extends SomeObject> = PropThatWillBeInjected<T> & WannaBePropTypes;

type PropTypes<T extends SomeObject> = FullProps<T> | WannaBePropTypes;

So fn is optional until you define children as ReactElement<FullProps<SomeObject>> in Wrapper component.
As for the Component, I think you can just cast props to FullProps:

const { fn, name } = props as FullProps<T>;

But if you need more strict code for some reason, you can narrow props type this way:

function isFullProps<T extends SomeObject>(props: PropTypes<T>): props is FullProps<T> {
	return !!(props as FullProps<T>).fn;
}

function Component<T extends SomeObject>(props: PropTypes<T>) {
	if (!isFullProps(props)) return <></>;
	const { fn, name } = props;
	const result = fn(name);
	return <div>Hello, {result.someKey}</div>;
}

Though it seems this condition will always be false in your case.
This is how to tackle with Typescript only.

BTW: maybe you can just pass array of WannaBePropTypes objects into Wrapper instead of children? This sounds better if <Component name="Alice" /> should do nothing by itself.