Wrapper component that passes props to children render function

I'm trying to type a wrapper component that takes a title prop and a children prop that's a function. All the other props passed to the wrapper should be used as an argument when rendering the children:

import React, { ReactNode, InputHTMLAttributes } from "react"

type WrapperProps<P extends object> = {
    title: string
    children: (props: P) => ReactNode
} & P

const Wrapper = <P extends object>({ title, children, ...rest }: WrapperProps<P>) => {
    return children(rest)
}

type InputProps = { type: string, name: string }

const WrappedInput = (inputProps: InputProps) => <Wrapper
    title="Hello, World"
    {...inputProps}
>{(props) => <input {...props} />}
</Wrapper>

I can't understand two things:

1. In the Wrapper component, when calling children(rest) the compiler indicates that the argument is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'object'. What could P be instantiated with that would be incompatible here? I can cast rest as P but I'd like to understand what the issue is.

2. In the WrappedInput component, the compiler thinks that the props object (in the children render function) has children and title properties. How can that be when I've explicitly said that the argument that children are being called with is of type P and P doesn't have those properties?

the main issue here is, as you mentioned in second question, the props passed to the render function is of type P but as a generic, P is being used to capture all the props, regardless of how they are split and used.

So for you first question, if you consider a situation where the props you want to be passed to the children also contain a title field for example, and that the type was not necessarily to be a string, then the types are not related.

For your second question, this also touched upon the first question, the quickest approach whilst changing least the current structure is to specify the type of children arg as `Omit<P, "title"|"children"> as you can see here.

This won't be exactly as you specified, the generic P will does still have properties children and title. You could try to say P extends something that does not allow those such as P extends Omit<Record<string,unknown>, "title"|"children" to try and satisfy that condition but fairly sure that does not work in typescript, you can't specify to extend some record negating certain fields, linked to https://github.com/microsoft/TypeScript/issues/31153.

But don't think that's a big deal, it's fine if P has all the properties, and you can just omit them from children render args.

type WrapperProps<P extends object> = {
    title: string
    children: (props: Omit<P,"title"|"children">) => ReactNode
} & P

You probably also want to change object to something like Record<string,unknown> since object will accept things like arrays, Record is generally better for props.

You can also change your types so that P can be exactly the props for children but then you cannot spread them onto that main props type. Something like this

type WrapperProps<P extends Record<string, unknown>> = {
  title: string;
  children: (props: P) => ReactNode;
  childrenProps: P;
};

Then there is no uncertainty with the types as P is used only as args for children function and as it's own field on WrapperProps.

Hope it helps