onNotification pushes notification in background but not in foreground

I am currently encountering an issue where when I send my C# backend to push using firebase FCM the onNotifications sends a push notification on the background but when it goes on the foreground it doesn’t send a push notification as well. It does send a toast where I prepared one but I would want to convert into a push notification instead.

Here is the code of the push notification

      (data) => {
             console.log("Payload: ", data);
       if (data.tap) {
                console.log('Received in background');
       } else {
                  console.log('recieved in foreground');
                   this.presentToast("new message");

and here is the backend call

var url = "https://fcm.googleapis.com/fcm/send";

            var request = WebRequest.CreateHttp(url);
            request.Method = "POST";

            var dataDict = new Dictionary<string, dynamic>
                { "title", title },
                { "body", body },

            var dict = new Dictionary<string, dynamic>
                { "to", userToken },
                { "data", dataDict },

            var json = JsonConvert.SerializeObject(dict);

            request.AllowWriteStreamBuffering = false;
            request.ContentType = "application/json";
            request.Accept = "application/json";
            request.SendChunked = false;
            request.ContentLength = json.Length;

            using (var writer = new StreamWriter(request.GetRequestStream()))

            request.Headers.Add("Authorization", $"key={this.Key}");

            var response = request.GetResponse() as HttpWebResponse;
            var responseData = response.GetResponseData();

You could use https://ionicframework.com/docs/native/local-notifications to create a loca notification to show when app is in foreground instead of showing a toast.