How to properly distribute props within React HOC

Question

I have a HOC including a React.Context provider. The HOC takes props for both the wrapper component and the provider. How do I properly pass these to the corresponding elements?

Currently the <WrappedComponent {...props} /> is throwing the following error:

TS2322: Type 'Omit<T & FormProviderProps, "config" | "initialData">' is not assignable to type 'IntrinsicAttributes & T & FormProviderProps & { children?: ReactNode; }'.   
Type 'Omit<T & FormProviderProps, "config" | "initialData">' is not assignable to type 'T'.     
'T' could be instantiated with an arbitrary type which could be unrelated to 'Omit<T & FormProviderProps, "config" | "initialData">'.

export const withForm = <T,>(WrappedComponent: React.ComponentType<T & FormProviderProps>) => {
    const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";

    const ComponentWithProvider = ({ config, initialData, ...props }: T & FormProviderProps) => {
        return (
            <FormProvider config={config} initialData={initialData}>
                <WrappedComponent {...props} />
            </FormProvider>
        );
    };

    ComponentWithProvider.displayName = `withTheme(${displayName})`;

    return ComponentWithProvider;
};

FYI passing all props to both the provider and the wrapped component would work, but is this really the best practice?