Component types are incompatible with React 18

[AtaTaheri]

🐛 Bug Report

I upgraded my react version & its types (react & react-dom) to v18. After the upgrade I cannot use any of the loadable components inside JSX tags. Here is the full error:

'XXXComponent' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<XXXComponentProps & ExtraComponentProps, any, any> | null' is not a valid JSX element.

My code

const XXXComponent: LoadableComponent<XXXComponentProps> = loadable(() =>
  import('~/src/components/XXXComponent'),
);

const AnotherComponent = ()=>{
   return (
         <>
             <XXXComponent {...props} />
        </>
   );
}

Expected behavior

Should be able to use loadable components without any issue

## System:
 - OS: macOS 12.5.1
 - CPU: (8) arm64 Apple M1
 - Memory: 75.36 MB / 16.00 GB
 - Shell: 5.8.1 - /bin/zsh
## Binaries:
 - Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
 - Yarn: 1.22.17 - /usr/local/bin/yarn
 - npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
## npmPackages:
 - @loadable/component: ^5.15.3 => 5.15.3 
 - @types/react: ^18.0.27 => 18.0.27 
 - @types/react-dom: ^18.0.10 => 18.0.10 
 - react: ^18.2.0 => 18.2.0 
 - react-dom: ^18.2.0 => 18.2.0 

[Clonex]

I've expirienced a simillar issue for another package when upgrading to React 18. Take a look at this issue, this solution was what solved it for us.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.