How to strictly type a component props which include both the inner component to render and the inner component props?

Here is what I want in the end, a wrapper component that renders passed in the final component only when data is fetched and validated successfully

<Wrapper
  url="/foo"
  as={FooComponent}
  validate={fooResponse => fooResponse != null}
  fooPropsA={1}
  fooPropsB={2}
/>

Here is my latest attempt https://tsplay.dev/3NDZOW

In brief, the requirements are following:

1. inner component must have value prop to accept fetched value on a real render
2. validate function argument should be inferred from inner component (prop) types
3. wrapper component should accept all props of inner component, except value

Is it possible?