Get State from React Hook Testing

Question

I'm having a problem trying to access state and setState using react-hooks-testing-library.

I've followed examples from various sources using Provider but it doesn't work

Pay.tsx

export const Pay = (): JSX.Element => {
  const location = useLocation()
  const [paymentState, setPaymentState] = useState<
    'IDLE' | 'LOADING' | 'SUCCESS' | 'FAILURE'
  >('IDLE')

  return (
    <View style={{ minHeight: '100vh' }}>
      {paymentState === 'LOADING' && <PaymentLoading />}
      {paymentState === 'SUCCESS' && <PaymentResult status="SUCCESS" />}
      {paymentState === 'FAILURE' && <PaymentResult status="FAIL" />}

Pay.test.tsx

import { renderHook, act } from '@testing-library/react-hooks'

it(`Payment Input`, async () => {
const wrapper: FC = ({ children }) => (
  <SafeAreaProvider>
    <Router history={history}>
     <Route path="/pay">{children}</Route>
    </Router>
  </SafeAreaProvider>
)
const { result: payHook, waitForNextUpdate } = renderHook(() => Pay(), {
  wrapper,
})
console.log(payHook.current)
})

Expected of console.log(payHook.current)

{paymentState: 'IDLE', setPaymentState: [Function]}

Result that i got of console.log(payHook.current)

{        '$$typeof': Symbol(react.element),
        type: {
          '$$typeof': Symbol(react.forward_ref),
          render: [Function (anonymous)] { displayName: 'View' }
        },
        key: null,
        ref: null,
        props: {
          style: { minHeight: '100vh' },
          children: [ [Object], false, false, false ]
        },
        _owner: <ref *1> FiberNode {
          tag: 0,
          key: null,
          elementType: [Function: TestComponent],
          type: [Function: TestComponent],