Agora-RTC-React: client.remoteUsers behaving unexpectedly

So, I have a video call channel where two users can connect. I’m checking the number of connected users by checking the length of client.remoteUsers array. The problem is, that when one of the users refreshes the video call page, then instead of returning 2, it returns me 3.

In my code, I only show the video screen when the length of client.remoteUsers array is 2. But, I’m perplexed by this unexpected behavior. Can anyone please help? Thanks.

Reference code:

client.on("user-published", async (user, mediaType) => {
          console.log(user, "agoramiccc")
          await client.subscribe(user, mediaType);
          // console.log("subscribe success");          
          if (mediaType === "video") {
            if (!users.length) {
              setUsers((prevUsers) => {
                return [user];
              });
            }
          }
          if (mediaType === "audio") {
            user.audioTrack?.play();
          }
        });



        client.on("user-unpublished", (user, type) => {
          console.log(user, "unpub")

          // console.log("unpublished", user, type);
          if (type === "audio") {
            user.audioTrack?.stop();
          }
          if (type === "video") {
            setUsers((prevUsers) => {
              return prevUsers.filter((User) => User.uid !== user.uid);
            });
          }
        });
        client.on("user-left", (user) => {
          // console.log("leaving", user);
          setUsers((prevUsers) => {
            return prevUsers.filter((User) => User.uid !== user.uid);
          });
        });
        await client.join(config.appId, name, config?.token, null);
        if (tracks) await client.publish([tracks[0], tracks[1]]);
        setStart(true);
      };