Unusual styles applied to elements on Client View and Unable to mirror my video

Description
I am using the Zoom Web SDK to host meetings within my React project. I have management to initialize the client view with limited features (chat, reactions, audio and video share) and single speaker view only.

However, I cannot seem to mirror my video even though there is an option on the video tab. Clicking it appears to do nothing. Also the elements in client view look a little bit disoriented to me. For you information, I have used React Helmet to push the CDN links to required stylesheets.
Is there anything I am missing that might be causing these issues ? Kind of confused.

Also, as per the docs, it seems like there is an extra layer of setup to support Gallery view. Can i get some more instructions (maybe less complicated) on that as well ?

Browser Console Error
None

Which Web Meeting SDK version?
2.4.5

Meeting SDK Code Snippets
None

Screenshots

Code Snippets
Initialized the ZoomMtg

ZoomMtg.setZoomJSLib("https://source.zoom.us/2.4.5/lib", "/av");

ZoomMtg.preLoadWasm();
// ZoomMtg.prepareJssdk();
ZoomMtg.prepareWebSDK();

// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load("en-US");
ZoomMtg.i18n.reload("en-US");

Pushed CDN stylesheet links using Helmet

<Helmet> <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.4.5/css/bootstrap.css" /> <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.4.5/css/react-select.css" /> </Helmet>

Device (please complete the following information):

  • Device: Macbook Pro 2020 (Intel)
  • OS: Mac OS 11.3.1 (Big Sur)
  • Browser: Brave
  • Browser Version: Chromium: 102.0.5005.115 (Official Build) (x86_64)

Additional context
I had done a similar setup in a previous project and no doubt ran into same kind of issue.