Ionic 2 toast can't be dismissed manually

I am working on an ionic2 project and trying to show connection status message in the app. Here is my code:

import { ToastController, Toast  } from 'ionic-angular';
connectedToast: Toast; disconnectedToast: Toast;

this.connectedToast = this.toast.create({
        message: `You are now ${networkstatus.connectType} via ${networkstatus.networkType}`,
        position: 'bottom',
        cssClass: 'toast-connected',
        duration: 3000
    });

    this.disconnectedToast = this.toast.create({
        message: `This function is not available because you are ${networkstatus.connectType}`,
        position: 'bottom',
        cssClass: 'toast-disconnected'
    });

    if(networkstatus.isOnline) {              
        if(this.disconnectedToast != null)                 
            this.disconnectedToast.dismiss();

        this.connectedToast.present();
    }

    if(networkstatus.isOffline) this.disconnectedToast.present();

What I wanted to achieve is: if offline, toast msg will stay there until it is online. But for online message, it will only display for 3 seconds. Everything is working fine except when it is online and after online message is displayed, the offline toast msg stays there and didn't disappear even though I called dismiss(). Did I miss anything here?

my environment is: "ionic-angular": "3.3.0", "ionic": "3.6.0", "typescript": "2.3.3"

Any help will be appreciated!