ReactJS and NextJS newbie here would appreciate any advice on below issue! Thanks!

The stack:

• Node v16.6.1
• React v17.0.2
• Next.js v10.0.4

I am implementing a carousel, and--since carousel will need client-side javascript--am using next/dynamic to implement a dynamic component with no SSR. This works fine, but when I add a javascript event listener to the dynamic module, the module stops being rendered.

Debugging Next in Chrome DevTools shows no errors or warning when compiling the page. I couldn't find a reference to any additional compile information being available in Next documentation.

Parent module:

import react from 'react';
import dynamic from 'next/dynamic'


const DynamicComponentWithNoSSR = dynamic(
    () => import('../components/shared/dynamicTestComponent'),
    { ssr: false }
  )

const TestEmbedDynamicComponent: React.FC = () => {

    return (
      <div>
      <div>this is text above dynamic component</div>
        <DynamicComponentWithNoSSR/>
        <div>this is text below dynamic component</div>
        </div>
    )}

export default TestEmbedDynamicComponent

Dynamic module:

const selectedButton = document.querySelector(".selectMe");
//selectedButton.addEventListener("click", e => {alert("dynamic module loaded!");});

const DynamicTestComponent: React.FC = () => {

    return (
        <div className="">lorem ipsum
        <button className="selectMe">clickMe!</button>
        </div>
        
    )}

export default DynamicTestComponent

Result:

And if I uncomment the line where the listener is added: