Hydration Error: Initial UI does not match the client side render.

[egeyumlu-cl]

Description: I'm encountering an issue with my Next JS application where I'm using the react-chat-engine library. The code throws a hydration error and, when I remove the useEffect hook, it also complains about IntersectionObserver being undefined even though it is imported correctly.

Code: `import dynamic from 'next/dynamic' import { useRouter } from 'next/router'; import React, { useState, useEffect } from 'react' import { getOrCreateChat } from 'react-chat-engine'

const ChatEngine = dynamic(() => import('react-chat-engine').then((module) => module.ChatEngine), { ssr: false, // Disable server-side rendering });

const MessageFormSocial = dynamic(() => import('react-chat-engine').then((module) => module.MessageFormSocial), { ssr: false, // Disable server-side rendering });

const DirectChatPage = (props) => { // Code omitted for brevity

useEffect(() => {
    setShowChat(true);
}, []);

// Code omitted for brevity

return (
    showChat && (
        <div className='shadow' style={{ /* styles omitted for brevity */ }}>
            <ChatEngine 
                height="80vh"
                projectID={"xxxxxxxxxxxxxxxxxxxxxxxxxxxx"}
                userName={"xxxxxxxxxxx"}
                userSecret={"1234"}
                renderNewMessageForm={() => <MessageFormSocial />}
                renderNewChatForm={(creds) => renderChatForm(creds)}
            />
        </div>
    )
);

}

export default DirectChatPage; `

Steps to reproduce:

Include the react-chat-engine library in a Next.js project. Use the ChatEngine and MessageFormSocial components dynamically imported using next/dynamic. Set ssr: false to disable server-side rendering. Add the necessary state and functions. Encounter a hydration error when rendering the page. If you remove the useEffect hook, you encounter an IntersectionObserver undefined error. Expected behavior: The page should render without any hydration errors and correctly initialize the IntersectionObserver without errors.

Any suggestions or insights on how to resolve this issue would be greatly appreciated.