title: adding jitsi-Meet video conferencing in react web app using external_api.js
body: <p>i have added <code>jitsi meet</code> video conferencing in my react web app as described by <a href="https://dev.to/justinramel/embed-free-video-conferencing-into-your-react-app-in-minutes-27ak" rel="nofollow noreferrer">this link</a>.
  I have also added <code>react-jitsi</code> component as given in <a href="https://www.npmjs.com/package/react-jitsi" rel="nofollow noreferrer">this link</a>
  the <code>loading meeting...</code> does not go away and is stuck all the time and does not render jitsi interface for meeting.when i click on <code>let's start</code> button as given in this code component.
  here is <code>LiveMeeting.jsx</code> component</p>
  <pre><code>import React, { useState } from 'react'
  import Jitsi from 'react-jitsi'
  
   
  export const LiveMeeting = () =&gt; {
   
    const [displayName, setDisplayName] = useState('')
    const [roomName, setRoomName] = useState('')
    const [password, setPassword] = useState('')
    const [onCall, setOnCall] = useState(false)
   
    return onCall
      ? (
        &lt;Jitsi
          roomName={roomName}
          domain='meet.jit.si'
          displayName={displayName}
          config={{ startAudioOnly: true }}
          interfaceConfig={{ filmStripOnly: true }}
          password={password}
        
        /&gt;)
      : (
        &lt;&gt;
          &lt;h1&gt;Create a Meeting&lt;/h1&gt;
          &lt;input type='text' placeholder='Room name' value={roomName} onChange={e =&gt; setRoomName(e.target.value)} /&gt;
          &lt;input type='text' placeholder='Your name' value={displayName} onChange={e =&gt; setDisplayName(e.target.value)} /&gt;
          &lt;button onClick={() =&gt; setOnCall(true)}&gt; Let&amp;apos;s start!&lt;/button&gt;
        &lt;/&gt;
      )
   
  }
  </code></pre>
  <p>However the network tab shows the success of all loaded stuff and there is no error.</p>
  <p>moreover the <code>react-jitsi</code> is a typescript library and my whole app uses <code>jsx</code>instead of <code>tsx</code>.I do not have <code>tsx</code> experience .</p>
  <p>thanks in advance for help.
  here are screenshots  attached.
  <a href="https://i.stack.imgur.com/l1527.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l1527.png" alt="starting meeting screenshot" /></a>
  <a href="https://i.stack.imgur.com/6j77z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6j77z.png" alt="loading meeting screenshot" /></a></p>