React Native Redirect Url Error ( Config error: redirectUrl must be a string ) Spotify App

I hope you're all doing well. I'm currently working on building a music app, and I'm facing a bit of a challenge with the login functionality. When I click on the login button, the idea is that it should take me to the Spotify login page. However, instead of that, I'm encountering an error message that says: Authentication error: [Invariant Violation: Config error: redirectUrl must be a string].

I'm a bit stuck here and would really appreciate any help you can provide. Could someone kindly guide me in understanding what might be causing this error and how I could go about fixing it? I've checked my code, and it seems like the redirectUrl should be a proper string. But somehow, it's not working as expected.

If anyone has encountered this issue before or has any insights into how to troubleshoot it, I would be extremely grateful for your advice. Feel free to let me know if you need more information about my project setup or any other details that might help in diagnosing the problem.

Thank you so much in advance for your time and assistance.

import React, {useEffect} from 'react';
import {Text, SafeAreaView, View, Pressable} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {authorize} from 'react-native-app-auth';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {useNavigation} from '@react-navigation/native';

const LoginScreen = () => {
  const navigation = useNavigation();

  //* token validation checking
  useEffect(() => {
    const checkTokenValidation = async () => {
      const accessToken = AsyncStorage.getItem('token');
      const expirationDate = AsyncStorage.getItem('expirationDate');
      console.log(accessToken, expirationDate);
      if (accessToken && expirationDate) {
        const currentTime = Date.now();
        if (currentTime < parseInt(expirationDate)) {
          navigation.replace('Main');
        } else {
          //tooken wou;d be expired so we need to remove it form the async storage
          AsyncStorage.removeItem('token');
          AsyncStorage.removeItem('expirationDate');
        }
      }
    };
    checkTokenValidation();
  }, []);

  const authentication = async () => {
    const authConfig = {
      issuer: 'https://accounts.spotify.com',
      clientId: 'dsshsds55464546dsd65dsf5644dsfsd',
      redirectUri: 'hubspot://oauthredirect', // Use the same URI as in the dashboard
      scopes: [
        'user-read-playback-state',
        'user-read-currently-playing',
        'user-read-email',
        'user-library-read',
        'user-read-recently-played',
        'user-top-read',
        'playlist-read-private',
        'playlist-read-collaborative',
        'playlists-modify-public',
      ], // Add required scopes
    };
    try {
      const result = await authorize(authConfig);
      console.log(result);
      if (result.accessToken) {
        const expirationDate = new Date(
          result.accessTokenExpirationDate,
        ).getTime();
        AsyncStorage.setItem('token', result.accessToken);
        AsyncStorage.setItem('expirationDate', expirationDate.toString());
        navigation.navigate('Main');
      }
    } catch (error) {
      console.error('Authentication error:', error);
    }
  };

  return (
    <LinearGradient
      colors={['#000000', '#14213d', '#001219']}
      className=" flex-1">
      <SafeAreaView>
        <View className=" h-28" />
        <Icon
          name="hubspot"
          size={80}
          color="white"
          style={{textAlign: 'center'}}
        />
        <Text className="text-white font-bold text-5xl text-center mt-10">
          Millions of Songs Free on hubspot!
        </Text>
        <View className="h-20" />
        <Pressable
          onPress={() => authentication()}
          className="bg-[#1DB954] p-3 rounded-full mx-auto items-center justify-center w-80 ">
          <Text>Sign In With hubspot </Text>
        </Pressable>
        <Pressable className="bg-[#1e2231] border-[#c0c0c0] border p-2 flex-row mt-5 rounded-full mx-auto text-center w-80 ">
          <Icon name="cellphone" size={25} color={`white`} />
          <Text className="text-white flex-1 text-center">
            Continue with phone number
          </Text>
        </Pressable>
        <Pressable className="bg-[#1e2231] border-[#c0c0c0] border p-2 flex-row mt-5 rounded-full mx-auto text-center w-80 ">
          <Icon name="google" size={25} color={`red`} />
          <Text className="text-white flex-1 text-center">
            Continue with phone google
          </Text>
        </Pressable>
        <Pressable className="bg-[#1e2231] border-[#c0c0c0] border p-2 flex-row mt-5 rounded-full mx-auto text-center w-80 ">
          <Icon name="facebook" size={25} color={`blue`} />
          <Text className="text-white flex-1 text-center">
            Continue with phone facebook
          </Text>
        </Pressable>
      </SafeAreaView>
    </LinearGradient>
  );
};

export default LoginScreen;

Authentication error: [Invariant Violation: Config error: redirectUrl must be a string].

But in your code, it's redirectUri