App.js

//...function App(){}
//This function will accumulate the list of particiapnts and generate the ParticipantView for each participant in the meeting
const ParticipantsView = () => {
  //Get the list of participants
  const { participants } = useMeeting();
  return (
    <>
      <h2 style={{ color: "#3E84F6" }}>Participants</h2>
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          flexDirection: "row",
          padding: "8px",
        }}
      >
        {[...participants.keys()].map((k) => (
          <div style={{ }}>
              <ParticipantView key={k} participantId={k} />
          </div>
        ))}
      </div>
    </>
  );
};