Error: Element type is invalid

[lkl03]

Hi. I've gotten this error while building a chat feature to my app. It's weird since it's the same code I was using before on a different project that gave me no problem. I think that maybe the problem is that project was using react v17.0.2 and this one that throws me this error is react v18.2.0. but I don't know how to handle this

Code:

import dynamic from 'next/dynamic'

const ChatEngine = dynamic(() =>
  import("react-chat-engine").then((module) => module.ChatEngine)
);
const MessageFormSocial = dynamic(() =>
  import("react-chat-engine").then((module) => module.MessageFormSocial)
);

const Chats = () => {
    let { user, logout } = useContext(AppContext)
    console.log(user)
    const [loading, setLoading] = useState(false)
    const [showChat, setShowChat] = useState(false)
    const [username, setUsername] = useState(user.email)
    const [usersecret, setUsersecret] = useState(user.pass)

    useEffect(() => {
        if (typeof document !== null) {
          setShowChat(true)
        }
      })

    if (!showChat) return <div />

    return (
        <section id='chats' className={`flex md:flex-row flex-col md:items-center ${styles.paddingY} xs:mt-20`}>
            <div>
            <ChatEngine 
            height='calc(100ch - 200px)'
            projectID=process.ENV.NEXT_CHAT_ENGINE_PROJECT_ID
            userName={username}
            userSecret={usersecret}
            renderNewMessageForm={() => <MessageFormSocial />}
            />
            </div>
        </section>
    )
}

export default Chats

NodeJS: 16.13.1 NextJS: 12.3.1 ReactJS: 18.2.0

Thank you so much by the way!