React Native/Redux - Response returns as array when fetching string

I am currently migrating from React Navigation 4 to 5 and with that i have also implemented redux for state management. I am really new to redux and cant figure out what i am doing wrong.

I am trying to fetch the user objects like the token and username for example. It seems to be working when fetching a single integer like loginStatus but when fetching a string it does not work as intended as you can see below. Am i saving it wrong or what am i missing?

Output from console.log(userToken); in Home.js

 LOG  {"0":"{","1":"\"","2":"t","3":"o","4":"k","5":"e","6":"n","7":"\"","8":":","9":"\"","10":"t","11":"e","12":"s","13":"t","14":"_","15":"t","16":"o","17":"k","18":"e","19":"n","20":"_","21":"v","22":"a","23":"l","24":"u","25":"e","26":"\"","27":",","28":"\"","29":"u","30":"s","31":"e","32":"r","33":"n","34":"a","35":"m","36":"e","37":"\"","38":":","39":"\"","40":"t","41":"e","42":"s","43":"t","44":"_","45":"t","46":"o","47":"k","48":"e","49":"n","50":"_","51":"u","52":"s","53":"e","54":"r","55":"n","56":"a","57":"m","58":"e","59":"\"","60":"}"}

If i remove JSON.stringify() gives error below

 ERROR  Error: Objects are not valid as a React child (found: object with keys {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60}). If you meant to render a collection of children, use an array instead.

Home.js (when token exists and user is signed in)

import React, {useState} from 'react';
import { Platform, StyleSheet, View, Image, StatusBar, TextInput, TouchableOpacity, Text, Keyboard, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

import {updateUser} from '../../redux/actions/userActions';
import {useSelector, useDispatch} from 'react-redux';

function HomeScreen({navigation}) {
    const [handleBlock, setHandleBlock] = useState(0);
    const userToken = useSelector((state) => JSON.stringify(state.user.userdata));
    const dispatch = useDispatch();


       React.useEffect(() => {
         const unsubscribe = navigation.addListener('focus', () => {
             console.log("onFocusFunction");
             console.log(userToken);
         });

         return unsubscribe;
       }, [navigation]);


        return (
            <View>
                ... Just some render code here ...
            </View>
        );
}

export default HomeScreen;

Signin.js (Code that runs when login was successfully)

const setData = async () => {
    let loginData = {token: "test_token_value", username: "test_username_value"};
    await AsyncStorage.setItem('data', JSON.stringify(loginData));
    dispatch(updateUser(loginData));
}; setData();

actionTypes.js

export const UPDATE_USER = 'UPDATE_USER';

userActions.js

import {UPDATE_USER} from './actionTypes';

const updateUser = (userdata) => {
  return {
    type: UPDATE_USER,
    userdata: userdata,
  };
};

export {updateUser};

index.js (reducer)

import {combineReducers} from 'redux';

import user from './user';

export default combineReducers({
  user,
});

user.js (reducer)

import {UPDATE_USER} from '../actions/actionTypes';

const initialState = {
  userdata: {},
  loginStatus: -1, // -1 == loading, 0 = not logged in, 1 == logged in
};

const updateUser = (state, action) => {
  let ud = action.userdata;

  return {...state, userdata: Object.assign({}, ud), loginStatus: ud ? 1 : 0};
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_USER:
      return updateUser(state, action);
    default:
      return state;
  }
};

export default userReducer;

index.js (store)

import reducers from '../reducers/index';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

const applyStoreMiddleware = applyMiddleware(thunk)(createStore);
export const store = applyStoreMiddleware(reducers);

LoadingScreen.js

import {updateUser} from '../../redux/actions/userActions';
import {useDispatch} from 'react-redux';

function LoadingScreen() {
const dispatch = useDispatch();
  useEffect(() => {
    async function getAsyncData() {
      let data = await AsyncStorage.getItem('data');
      console.log(data);
      dispatch(updateUser(data));
    }
}

I have been using the initial code from here: https://github.com/gajjartejas/React-Navigation-5-Login-Animation-Demo