I am using Ionic and React and trying to implement deeplinking, I am using App.getLaunchUrl(); from capacitor it returns empty?

I am using Ionic and React and trying to implement deeplinking I am using App.getLaunchUrl(); from capacitor, when App is not open in the background (Android platform) every thing works fine but when the App is open in the background it returns null, also I have tried getState() method to get the launchUrl when the App state has been change but it is not working. These are the versions which I am using:

{
"@capacitor/android": "^2.1.0",
"@capacitor/core": "2.1.0",
"@capacitor/ios": "^2.1.0",
"@ionic-native/contacts": "^5.26.0",
"@ionic-native/core": "^5.26.0",
"@ionic-native/deeplinks": "^5.26.0",
"@ionic/app-scripts": "3.2.4",
"@ionic/pwa-elements": "^1.5.2",
"@ionic/react": "^5.1.0",
"@ionic/react-hooks": "0.0.8",
"@ionic/react-router": "^5.1.0",
"@testing-library/jest-dom": "^5.7.0",
"@testing-library/react": "^10.0.4",
"@testing-library/user-event": "^10.1.2",
"@types/jest": "^25.2.1",
"@types/lodash": "^4.14.153",
"@types/node": "^13.13.5",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"@types/react-router": "^5.1.7",
"@types/react-router-dom": "^5.1.5",
"axios": "^0.19.2",
"cordova-plugin-contacts": "^3.0.1",
"ionic": "^5.4.16",
"ionic-plugin-deeplinks": "^1.0.20",
"ionicons": "^5.0.1",
"lodash": "^4.17.15",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"short-unique-id": "^3.0.3",
"typescript": "3.8.3"


 }

and this is the code I am using inside the App component which contains my Router.

import React, { useReducer, useEffect, useState } from "react";
import { Route, Redirect } from "react-router-dom";
import { IonApp, IonRouterOutlet } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import Home from "./pages/Home/Home";
import InroPage from "./pages/IntroPage/IntroPage";
import Login from "./pages/Login/Login";
import Verfication from "./pages/Verification/Verifocation";
import Profile from "./pages/Profile/Profile";
import HomePage from "./pages/HomePage/HomePage";
import CircleDetail from "./pages/CircleDetail/CircleDetail";
import InvitationPage from "./pages/InvitationPage/InvitationPage";
import Actions, { Context, initialState, reducer } from "./state/globalState";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
/* Theme variables */
import "./theme/variables.css";
import "./styles/main.scss";
import { Plugins } from "@capacitor/core";
const { Storage } = Plugins;
const { App: CapApp } = Plugins;
const App: React.FC = () => {
  // const history = useHistory();

  const [hasData, setHasData] = useState(false);
  const [URL, setURL]: any = useState(null);
  const [store, dispatch] = useReducer(reducer, initialState);
  const getObject = async () => {
    const ret: any = await Storage.get({ key: "userData" });
    const user = JSON.parse(ret.value);
    return new Promise((resolve, reject) => {
      resolve(user);
    });
  };

  Plugins.App.addListener("appUrlOpen", (data: any) => {
    console.log("from app URL in APP Component");
    console.log(data);
    const resultID = data.url.split("/")[data.url.split("/").length - 1];
    setURL("/circle/" + resultID);
  });
  Plugins.App.addListener("appStateChange", async (state: any) => {
    console.log("from app state change in APP Component", state);
    const a = await Plugins.App.getLaunchUrl().then((ret) => {
      console.log(ret);
      if (ret.url !== "") {
        const resultID = ret.url.split("/")[ret.url.split("/").length - 1];
        setURL("/circle/" + resultID);
      } else {
        setURL(null);
      }
    });
    setTimeout(() => {
      console.log("in the settime out", a);
    }, 2000);
  });
  useEffect(() => {
    getObject().then((data: any) => {
      // console.log(data);
      if (data !== null) {
        setHasData(true);
      }
      Plugins.App.getLaunchUrl().then((ret) => {
        // console.log(ret);
        if (ret.url !== "") {
          // console.log("outside of useEffect");
          // console.log(ret.url.split("/"));
          const resultID = ret.url.split("/")[ret.url.split("/").length - 1];

          setURL("/circle/" + resultID);
        } else {
          setURL(null);
        }
      });
      // console.log(ret);
    });
  }, []);
  return (
    <Context.Provider value={{ store, dispatch }}>
      <IonApp>
        <IonReactRouter>
          {/* <AppUrlListener></AppUrlListener> */}
          {URL !== null && <Redirect to={URL} />}
          <IonRouterOutlet>
            <Route path="/circle/:id" component={InvitationPage} exact />
            <Route exact path="/" component={hasData ? HomePage : InroPage} />
            <Route exact path="/home-page" component={HomePage} />
            <Route path="/login" component={Login} />
            <Route path="/circle-detail/:id" component={CircleDetail} exact />
            <Route path="/verification" component={Verfication} />
            <Route path="/profile" component={Profile} />
            <Route path="/home" component={Home} exact={true} />
          </IonRouterOutlet>
        </IonReactRouter>
      </IonApp>
    </Context.Provider>
  );
};

export default App;