AADSTS50011 Error when trying to login to my react native app using Azure AD

Question

I have an issue when I tried to use my code that I found on expo go website using Azure AD on react native to let users login with a Microsoft Account. However, whenever I tried to login with a test account into the app, it will encounter an error as shown in the picture below:

Every time I tried to test the login, it will show that error code and says that the redirect URI specified in the request does not match the redirect URIs configured for my app.

Another question I have is whether this code can work even after I push it out to the Google Play and App Stores. If not, can you show an example of a login code for Microsoft Account that works even after I push it to the Google Play and App Stores? Thanks.

The code I used below:

import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import {
  exchangeCodeAsync,
  makeRedirectUri,
  useAuthRequest,
  useAutoDiscovery,
} from 'expo-auth-session';
import { Button, Text, SafeAreaView, StatusBar, TouchableOpacity } from 'react-native';


WebBrowser.maybeCompleteAuthSession();

export default function Login() {
  // Endpoint
  const discovery = useAutoDiscovery(
    'https://login.microsoftonline.com/my_tenant_id/v2.0',
  );
  const redirectUri = makeRedirectUri({
    scheme: 'native',
    path: 'exp://nz-aqv.kimx.app-test.exp.direct:80/--/exp://nz-aqv.kimx.app-test.exp.direct:80/--auth', // The link that I got from copying the login page link and extracting the link but it does not work
  });
  const clientId = 'my_client_id';

  // We store the JWT in here
  const [token, setToken] = React.useState(null);   

  // Request
  const [request, , promptAsync] = useAuthRequest(
    {
      clientId,
      scopes: ['openid', 'profile', 'email', 'offline_access'],
      redirectUri,
    },
    discovery,
  );

  return (
    <SafeAreaView style={{marginTop: StatusBar.currentHeight, paddingLeft: 5, paddingRight: 5}}>
      <Text style={{fontSize: 20, color:'blue', marginBottom: 10, textAlign: 'center'}}>Welcome to SSMC Mobile App! Click the button to Login.</Text>
      <Button color='purple
      '
        disabled={!request}
        title="Login"
        onPress={() => {
          promptAsync().then((codeResponse) => {
            if (request && codeResponse?.type === 'success' && discovery) {
              exchangeCodeAsync(
                {
                  clientId,
                  code: codeResponse.params.code,
                  extraParams: request.codeVerifier
                    ? { code_verifier: request.codeVerifier }
                    : undefined,
                  redirectUri,
                },
                discovery,
              ).then((res) => {
                setToken(res.accessToken);
              });
            }
          });
        }}
      />
      <Text>{token}</Text>
    </SafeAreaView>
  );
}

I have tried going to the website stated in the troubleshooting details section of the page to find out the link of the login page, extract it out and put into my code and azure AD redirect URI but it did not work.

Here's the URL that I'm using to get the authentication process from the url:

https://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/authorize?code_challenge=_ZcgLdpFvHvZmU3RY5H7-Imli57IdWFKyxDS97AJgjY&code_challenge_method=S256&redirect_uri=exp%3A%2F%2Fnz-aqv.kimx.app-test.exp.direct%3A80%2F--%2Fexp%3A%2F%2Fnz-aqv.kimx.app-test.exp.direct%3A80%2F--%2Fexp%3A%2F%2Fnz-aqv.kimx.app-test.exp.direct%3A80%2F--auth&client_id={app_id}&response_type=code&state=duOkQiYXAF&scope=openid%20profile%20email%20offline_access