Push Notifications - everything works except IOS when app is open

I have implemented push notifications using a Firebase cloud function for both android and IOS. When the app is closed the message is received in the notification bar. When tapped on the message the app opens without a problem for both IOS and Android

When the android app is opened and a message is received the message is shown in the notification bar.

However when the IOS app is opened, and a message is received, the message is shown in a pop-up on top of the screen, however inside the app I then receive a Failed to display notification message and I am not quite sure where I have to fix this.

Below is my notificationListener;

  useEffect(() => {
  this.removeNotificationDisplayedListener = firebase.notifications().onNotificationDisplayed((notification) => {
    console.log('NOTI DISPLAY', notification);
    // Process your notification as required
    // ANDROID: Remote notifications do not contain the channel ID. You will have to specify this manually if you'd like to re-display the notification.
});
this.removeNotificationListener = firebase.notifications().onNotification((notification) => {
  // Process your notification as required
  console.log('NOTI Normal', notification);
  notification

.android.setChannelId('channelId') .android.setSmallIcon('ic_launcher');

  const localNotification = new firebase.notifications.Notification()
                    .setNotificationId(notification.notificationId)
                    .setTitle(notification.title)
                    .setSound('default')
                    .setSubtitle(notification.subtitle)
                    .setBody(notification.body)
                    .setData(notification.data)
                    .ios.setBadge(notification.ios.badge);
                    localNotification.android.setChannelId('channelid');
                    console.log('SHOW NOTIFICATION', localNotification);
                firebase.notifications()
                    .displayNotification(localNotification)
                    .catch(err => console.error(err));
});
return () => {
    console.log('I AM CLEANING')
}

}, []);