`IonRouterOutlet` does not deep render in Ionic-React snapshot testing

I'm trying to do a snapshot of a component wrapped by Ionic React router and perform deep rendering. But IonicRouterOutlet doesn't seem to deep render in my case. Any suggestions how to fix this issue and perform a deep rendering successfully?

Here's my sample code:

import React from 'react'
import { render } from '@testing-library/react'
import { IonRouterOutlet } from '@ionic/react'
import { IonReactRouter } from '@ionic/react-router'

jest.mock('@capacitor/core', () => ({
  Plugins: {
    StatusBar: {
      setStyle: jest.fn()
    },
    Storage: {
      set: jest.fn(),
      get: () => ""
    }
  },
  StatusBarStyle: {
    Light: "LIGHT"
  },
}));

describe('component', () => {
  let component

  beforeEach(async () => {
    component = render(
      <IonReactRouter>
        <IonRouterOutlet>
          <div />
        </IonRouterOutlet>
      </IonReactRouter>
    )
  })

  describe('snapshot', () => {
    it('should match snapshot', () => {
      const { asFragment } = component
      expect(asFragment()).toMatchSnapshot()
    })
  })
})

Here's my snapshot output:

exports[`Login component snapshot should match snapshot 1`] = `
<DocumentFragment>
  <ion-router-outlet />
</DocumentFragment>
`;

As you can see, the <div /> is not generated in snapshot output. So how to fix this problem?

from `IonRouterOutlet` does not deep render in Ionic-React snapshot testing