@types/react 18.0.0 not compatible with Easy Peasy

I am getting a Typescript error if I upgrade @types/react to version 18.0.0 and use Easy Peasy:

Type error: No overload matches this call.

Overload 1 of 2, '(props: { store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; } | Readonly<{ store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; }>): StoreProvider<...>', gave the following error.

Overload 2 of 2, '(props: { store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; }, context: any): StoreProvider<StoreModel>', gave the following error.

     <StoreProvider store={store}>
     <Component {...pageProps} />
      </StoreProvider>

[asiraky]

I believe the more correct way to augment the type is to do the following:

type Props = StoreProvider["props"] & { children: React.ReactNode }

const StoreProviderCasted = StoreProvider as unknown as React.ComponentType<Props>

function WebAppContainer() {
    return (
        <StoreProviderCasted store={webAppStore}>
            ...
        </StoreProviderCasted>
    )
}

This will keep all the strong typing and add the children prop back to the type.

[wclear]

Here is an example of how to temporarily workaround this issue until the fix is published:

...
import { StoreProvider } from 'easy-peasy';

const StoreProviderOverride = StoreProvider as any;

function WebAppContainer() {
	return (
		<StoreProviderOverride store={webAppStore}>
			...
		</StoreProviderOverride>
	)
}