react-native-track-player Android Remote Control Options

Question

When a react-native application using react-native-track-player runs on Android, the notification center (Notification Center and Control Center in Xiaomi devices on MIUI 12) becomes laggy. It appears to me that the player tries to open something in the notification center but fails and retries over and over. I checked my app info in the setting and I saw the following:

I believe there's a problem in managing the remote control options in Android. I have no idea what is happening on the project's Android side since I'm a react-native developer but it seems that it's trying to send the meta info and control options of the music as a notification, which causes serious performance issues.

I faced this issue while testing on various android devices:

• Xiaomi a2 lite running Android 10
• Xiaomi Redmi note8 Pro running Android 10
• Samsung A31 running Android 10

This is how I have initialized my player:

function NewPlayer() {
 const events = [
   Event.PlaybackTrackChanged,
   Event.PlaybackQueueEnded,
   Event.PlaybackError,
   Event.RemotePause,
   Event.RemoteNext,
   Event.RemotePrevious,
   Event.RemotePlay,
   Event.RemotePause,
   Event.RemoteStop,
   Event.RemoteSeek,
   Event.RemoteDuck,
 ];
 useTrackPlayerEvents(events, event => {
   switch (event.type) {
     case Event.RemoteDuck:
       pauseSong();
       break;
     case Event.PlaybackError:
       console.warn(
         'An error occured while playing the current track.',
         event,
       );
       break;
     case Event.RemoteNext:
       playNextSong();
       break;
     case Event.RemotePrevious:
       playPrevSong();
       break;
     case Event.RemotePlay:
       playSong();
       break;
     case Event.RemotePause:
       pauseSong();
       break;
     case Event.RemoteStop:
       pauseSong();
       break;
     case Event.RemoteSeek:
       TrackPlayer.seekTo(event.position);
       break;
     default:
   }
 });

 useEffect(() => {
   // Initialize
   TrackPlayer.setupPlayer({
     iosCategory: IOSCategory.Playback,
     // iosCategoryOptions:
     iosCategoryMode: IOSCategoryMode.Default,
   });
   TrackPlayer.updateOptions({
     stopWithApp: true,
     capabilities: [
       Capability.Play,
       Capability.Pause,
       Capability.SkipToNext,
       Capability.SkipToPrevious,
       Capability.Stop,
       Capability.SeekTo,
     ],
     compactCapabilities: [Capability.Play, Capability.Pause],
   });
 }, []);
 return null;
}

I'm using react-navigation v5 and my player is instantiated in the root of the project:

<Provider store={store}>
      <PersistGate persistor={persistor}>
        <SafeAreaProvider>
          <StatusBar barStyle="light-content" />
          <RootStack authContext={authContext} />
          <NewPlayer />
        </SafeAreaProvider>
      </PersistGate>
</Provider>

Hint: I have also reported this issue on the GitHub:

How can I solve this issue?