Bug: Some external components cannot be used as JSX component.

[ltsfran]

For example, I'm using CSSTransitionGroup and I have this mistake.

React version:
@types/react: 18.0.24
@types/react-dom: 18.0.6
react: 18.2.0
react-dom: 18.2.0

Steps To Reproduce

1. Have a component CSSTransition inside createPortal function

createPortal(
    <CSSTransition
      in={isOpen}
      timeout={{ appear: 0, exit: 300 }}
      appear
      unmountOnExit
      nodeRef={nodeRef}>
        {(state) => (
          <DrawerContext.Provider value={{
            state,
            onCloseOverlay
          }}>
            <Portal ref={nodeRef}>
              {children}
            </Portal>
          </DrawerContext.Provider>)}
    </CSSTransition>,
    contentBody
  )

The current behavior

'CSSTransition' cannot be used as a JSX component.
Its instance type 'CSSTransition' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'import("/Users/ltsfran/projects/work/ssr/neoauto-ssr-advertisement/app/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.

Further digging

I need to add a resolutions property in my package.json with @types/react: "17.0.38" and it works. I think it's a problem of the library but I have this doubt.

[eps1lon]

You probably had multiple versions of @types/react installed which is generally not supported. That's why adding a resolutions entry resolved the issue.