ToastProvider' cannot be used as a JSX component

Question

I'm working on a "not-too-old" React application that uses Typescript. After installing the dependencies, some of the packages started throwing errors which so far I have been resolving. but I can't seem to figure out how to resolve the issue with react-toast-notification.

This is the codeblock that is throwing the error

ReactDOM.render(
  <ApolloProvider client={client}>
    <ApolloHooksProvider client={client}>
      <AppContextProvider>
        <ToastProvider placement="top-right">
          <IdleApp />
        </ToastProvider>
      </AppContextProvider>
    </ApolloHooksProvider>
  </ApolloProvider>,
  document.getElementById('root')
);

This is the error

'ToastProvider' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<ToastProviderProps, any, any> | null' is not a valid JSX element.
    Type 'Component<ToastProviderProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<ToastProviderProps, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 

Kindly help nudge me in the right direction.