React: Disable or limit swiping

Whenever I swipe between pages, my application displays animation twice while clicking (routerLink, useIonRouter) works as expected. My page headers show in the wrong order when I swipe forward. For example, in router stack a, b, c when I swipe back from c to a and scroll forward to c, the page header may display b’s or a’s and be stuck right there. Plus, if there is a modal open in b, then the modal will not disappear when I swipe back a. The modal will be blank and cover the whole page.

Another issue is that the page moves as many as I swipe. It is too sensitive that I only swipe 1 cm can lead to more than 3 pages moving.

Is there a way to disable swiping? If not, is there a way to limit swiping pages? For example, only swipe 1 page even when I swipe from the most left to the most right.

I am using @ionic/react@6.0.8 and @ionic/react-router@6.0.8:

"dependencies": {
    "@capacitor/app": "1.0.0",
    "@capacitor/camera": "1.0.0",
    "@capacitor/core": "3.0.0",
    "@capacitor/filesystem": "1.0.0",
    "@capacitor/haptics": "1.0.0",
    "@capacitor/keyboard": "1.0.0",
    "@capacitor/storage": "1.0.0",
    "@ionic-native/camera": "5.36.0",
    "@ionic-native/clipboard": "5.36.0",
    "@ionic-native/core": "5.36.0",
    "@ionic-native/firebase": "5.36.0",
    "@ionic/pwa-elements": "3.1.1",
    "@ionic/react": "^6.0.8",
    "@ionic/react-router": "^6.0.8",
    "@ionic/react-test-utils": "0.2.1",
    "@molteni/export-csv": "0.0.8",
    "@react-google-maps/api": "2.2.0",
    "@reduxjs/toolkit": "1.5.1",
    "@testing-library/jest-dom": "5.16.1",
    "@testing-library/react": "12.1.2",
    "@testing-library/react-hooks": "7.0.2",
    "@testing-library/user-event": "13.5.0",
    "@types/deep-equal": "1.0.1",
    "@types/jest": "26.0.20",
    "@types/node": "12.19.15",
    "@types/prettier": "2.2.3",
    "@types/react": "16.14.3",
    "@types/react-dom": "16.9.10",
    "@types/react-geocode": "0.2.0",
    "@types/react-redux": "7.1.16",
    "@types/react-router": "5.1.11",
    "@types/react-router-dom": "5.1.7",
    "@types/react-test-renderer": "17.0.1",
    "@types/redux-mock-store": "1.0.3",
    "@types/styled-components": "5.1.9",
    "@types/uuid": "8.3.3",
    "connected-react-router": "6.9.1",
    "cordova-clipboard": "1.3.0",
    "cordova-plugin-camera": "5.0.2",
    "cordova-plugin-firebase": "2.0.5",
    "d3": "7.0.0",
    "deep-equal": "1.1.1",
    "env-cmd": "10.1.0",
    "eslint": "7.26.0",
    "fake-indexeddb": "3.1.7",
    "firebase": "9.5.0",
    "formik": "2.2.9",
    "generate-avatar": "1.4.10",
    "hash-wasm": "4.9.0",
    "history": "4.0.0",
    "husky": "6.0.0",
    "ionicons": "5.4.0",
    "lint-staged": "11.0.0",
    "prettier": "2.3.0",
    "promise-all-settled-polyfill": "0.1.2",
    "query-string": "7.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-error-boundary": "3.1.3",
    "react-error-overlay": "6.0.9",
    "react-geocode": "0.2.3",
    "react-image-lightbox": "5.1.4",
    "react-redux": "7.2.4",
    "react-router": "5.2.0",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.3",
    "react-test-renderer": "17.0.2",
    "redux": "4.1.0",
    "redux-mock-store": "1.5.4",
    "styled-components": "5.3.0",
    "typescript": "4.5.4",
    "uuid": "8.3.2",
    "web-vitals": "0.2.4",
    "workbox-background-sync": "5.1.4",
    "workbox-broadcast-update": "5.1.4",
    "workbox-cacheable-response": "5.1.4",
    "workbox-core": "5.1.4",
    "workbox-expiration": "5.1.4",
    "workbox-google-analytics": "5.1.4",
    "workbox-navigation-preload": "5.1.4",
    "workbox-precaching": "5.1.4",
    "workbox-range-requests": "5.1.4",
    "workbox-routing": "5.1.4",
    "workbox-strategies": "5.1.4",
    "workbox-streams": "5.1.4"
  },

The following is a part of my routers (wrapped by IonReactRouter in another component):

<IonTabs>
      <IonRouterOutlet>
        {ListOfRoute.map((route) => {
          const props = { ...route, key: route.path, exact: !route.path.includes(':') };
          return route.isPublic ? <Route {...props} /> : <RoutePrivate {...props} />;
        })}
        <Route path="/" component={RouteAction} exact />
        <Route component={Default} />
      </IonRouterOutlet>

      <IonTabBar
        slot="bottom"
        style={{
          '--border': '1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.05))))',
        }}
      >
        {ListOfTabRoute.map(({ path, icon }) => {
          return (
            <IonTabButton key={path} tab={path} href={path} layout="label-hide">
              <IonIcon icon={icon} />
              <IonLabel>{path}</IonLabel>
            </IonTabButton>
          );
        })}
      </IonTabBar>
    </IonTabs>