In agora rtc sdk ng, when I reload my page, then remote user's mic is muted

Question

I'm using agora-rtc-sdk-ng v4 in my React app. The problem is, that whenever I reload my video call page, then the remote user mic stops working for me.

Here is some of the relevant code (event listeners mainly).

 const handleUserJoined = async (user, mediaType) => {
    await client.subscribe(user, mediaType);

    if (mediaType === 'video') {
      setUsers((previousUsers) => [...previousUsers, user]);
      // setRemoteTrack(client.remoteUsers);
    }

    if (mediaType === 'audio') {
      user.audioTrack.play()
    }
  };

  const handleUserLeft = (user) => {
    setUsers((previousUsers) =>
      previousUsers.filter((u) => u.uid !== user.uid)
    );
  };

 useEffect(() => {

    if (config.token && config.appId && config.channel) {
      client.on('user-published', handleUserJoined);
      client.on('user-left', handleUserLeft);
      client.on('user-info-updated')
      client.on('user-unpublished', (user, mediaType) => {
        if (mediaType !== "audio") {
          setUsers((previousUsers) =>
            previousUsers.filter((u) => u.uid !== user.uid)
          );
        }
      });

      client.on('network-quality', async (stats) => {
        try {
          setVideoQuality(stats);
          if (stats.uplinkNetworkQuality >= 1 && stats.uplinkNetworkQuality <= 2) {
            await localTracks[1]?.setEncoderConfiguration("360p_1")
          }

          else if (stats.uplinkNetworkQuality >= 3 && stats.uplinkNetworkQuality <= 4) {
            await localTracks[1]?.setEncoderConfiguration("360p_3");
          }

          else if (stats.uplinkNetworkQuality >= 5 && stats.uplinkNetworkQuality <= 6) {
            await localTracks[1]?.setEncoderConfiguration("240p_3");
          }
        } catch (error) {
          console.log(error);
        }
      })

      client
        .join(config.appId, config.channel, config.token, null)
        .then((uid) =>
          Promise.all([
            AgoraRTC.createMicrophoneAndCameraTracks(),
            uid,
          ])
        )
        .then(([tracks, uid]) => {
          const [audioTrack, videoTrack] = tracks;
          setLocalTracks(tracks);
          setUsers((previousUsers) => [
            ...previousUsers,
            {
              uid,
              videoTrack,
              audioTrack,
            },
          ]);
          client.publish(tracks);
        });

      return () => {
        for (let localTrack of localTracks) {
          localTrack.stop();
          localTrack.close();
        }
        client.off('user-published', handleUserJoined);
        client.off('user-left', handleUserLeft);
        client.unpublish(localTracks).then(() => client.leave());
      };
    }

  }, [config.token, config.channel]);

Maybe, I'm not handling the join/leave events properly. But, I have searched for days on the internet and can't seem to find any docs regarding it.