adding jitsi-Meet video conferencing in react web app using external_api.js

Question

i have added jitsi meet video conferencing in my react web app as described by this link. I have also added react-jitsi component as given in this link the loading meeting... does not go away and is stuck all the time and does not render jitsi interface for meeting.when i click on let's start button as given in this code component. here is LiveMeeting.jsx component

import React, { useState } from 'react'
import Jitsi from 'react-jitsi'

 
export const LiveMeeting = () => {
 
  const [displayName, setDisplayName] = useState('')
  const [roomName, setRoomName] = useState('')
  const [password, setPassword] = useState('')
  const [onCall, setOnCall] = useState(false)
 
  return onCall
    ? (
      <Jitsi
        roomName={roomName}
        domain='meet.jit.si'
        displayName={displayName}
        config={{ startAudioOnly: true }}
        interfaceConfig={{ filmStripOnly: true }}
        password={password}
      
      />)
    : (
      <>
        <h1>Create a Meeting</h1>
        <input type='text' placeholder='Room name' value={roomName} onChange={e => setRoomName(e.target.value)} />
        <input type='text' placeholder='Your name' value={displayName} onChange={e => setDisplayName(e.target.value)} />
        <button onClick={() => setOnCall(true)}> Let&apos;s start!</button>
      </>
    )
 
}

However the network tab shows the success of all loaded stuff and there is no error.

moreover the react-jitsi is a typescript library and my whole app uses jsxinstead of tsx.I do not have tsx experience .

thanks in advance for help. here are screenshots attached.