Why is dynamically changing the domain and clientId of the React Native SDK's Auth0Provider not working?

Help
,
1

As per React Native SDK’s documentation, I need to wrap my entire application with the SDK’s Auth0Provider. I am doing it like this:

Root.tsx

const Root = () => {
  return (
    <Provider store={store}>
      <Auth0ProviderWrapper>
        <App />
      </Auth0ProviderWrapper>
    </Provider>
  )
}

Auth0ProviderWrapper

const Auth0ProviderWrapper: FunctionComponent<Props> = ({ children }) => {
    const server = useSelector(selectServer);
    const { auth0domain, auth0clientId } = server;

    return (
        <Auth0Provider domain={auth0domain} clientId={auth0clientId}>
            {children}
        </Auth0Provider>
    );
};

As you can see, I am fetching the auth0domain and auth0clientId from the Redux store based on the currently selected server.

My issue is that it seems that the Auth0Provider somehow caches what I have passed to it initially, and then even if change the server and the auth0domain changes, when I try to login I get redirected to the first initial domain.

So if I use domain1.us.auth0.com, then swap to domain2.us.auth0.com and I open the universal login flow, I still see domain1.us.auth0.com in the URL.

If I console.log(auth0domain) in the Auth0ProviderWrapper component, I can see that it successfully changes, which means my component should re-render with the new domain being passed to the Auth0Provider. It’s as if the Auth0 instance does not update.

Anyone might know what could be happening here?