bug: Ionic React page transitions not working with history.push

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When transitioning between pages, it appears that the pages transition by sliding upward rather than coming in from the right.

Expected Behavior

Two <Route> components in an <IonRouterOutlet> should transition from left to right using useHistory().push()

Steps to Reproduce

Please see the codesandbox URL.

  <IonApp>
    <IonReactRouter >
      <IonRouterOutlet animated >
        <Route exact path="/page1" >
          <Page1 />
        </Route>
        <Route exact path="/page2">
          <Page2 />
        </Route>
        <Route exact path="/">
          <Redirect to="/page1" />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>

Code Reproduction URL

https://codesandbox.io/s/ionic6-react-typescript-page-transitions-veifn6?file=/src/App.tsx

Ionic Info

Ionic:

   Ionic CLI       : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.1.15

Capacitor:

   Capacitor CLI      : 3.6.0
   @capacitor/android : not installed
   @capacitor/core    : 3.6.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.6.0

System:

   NodeJS : v16.13.0 (/usr/local/bin/node)
   npm    : 8.14.0
   OS     : macOS Monterey

Additional Information

No response

[benallfree]

Thank you for the help!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.