I am encountering a very strange rendering issue when integrating the Zoom Meeting SDK (Client View) into my React application. The main Zoom meeting interface appears to be rendering outside and below its designated container element, which prevents interaction with the meeting controls.
I am using the recommended DOM structure in my component’s return block:
< className={\` relative w-full h-screen\`}>
< id=“zmmtg-root”></>
< id=“aria-notify-area”></>
</>
Problematic Behavior
When the meeting successfully initializes and joins (ZoomMtg.join() is successful):
-
The meeting interface does not appear to be contained within the parent
<div className={relative w-full h-screen}>. -
The main meeting canvas and controls render visually outside and below the expected container.
-
The meeting interface is displayed on the screen, but it seems to be in a position that makes it un-interactable (clicks do not register on the controls like Mute, Video, etc.).