React Expo - How to re-render on after data fetch and state change

I am fairly new to overall app development. I am stuck with this issue.

My objective here is to fetch user data from database and show it on "My profile screen".

I am able fetch data from MongoDB using FirebaseID which I already sent during sign up process. I can see it succesfully logged on console. However it doesnt automatically re-renders on the page. I spent 2 days trying to figure out on multiple platforms but I am completely stuck.

Thank you for any kind of help to get me there.

import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, TextInput, View, ScrollView, Image, FlatList, RefreshControl} from 'react-native';
import React, {useState, useEffect} from 'react'
import Icon from 'react-native-vector-icons/Feather';
import IconV from 'react-native-vector-icons/FontAwesome5';
import IconM from 'react-native-vector-icons/MaterialCommunityIcons';
import { useNavigation } from '@react-navigation/core';
import { useDispatch, useSelector } from 'react-redux';


import Header from '../src/components/Header';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { auth } from '../firebase';
import { updateProfile } from "firebase/auth";
import * as profilePageAction from '../redux/actions/profilePageAction';



const MyProfileScreen = props => {

  const [userEmail, setUserEmail] = useState();
  const [userName, setUserName] = useState();
  const [isLoading, setisLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [currentProfilePage, setCurrentProfilepage] = useState();

  const user = auth.currentUser;  
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const FirebaseID = user.uid;

  const profilePages = useSelector(state => state.profilePage.profilePages.find(profilePage => profilePage.FirebaseID == FirebaseID));    
  

  useEffect(() =>{
      dispatch(profilePageAction.fetchProfilePages())
      .then(response => console.log("response:", response))
      .catch(err => console.log(err));
  }, [dispatch]);

  useEffect(() =>{
    setCurrentProfilepage(profilePages);
    console.log("inside effect:", profilePages);
    if(profilePages){
    setUserEmail(profilePages.Email);
    console.log("inside current profile effect email", userEmail);
    }
    }, [profilePages]);

  
    useEffect(() =>{
      async function fetchUserData() {
      if(currentProfilePage){      
      console.log("inside effect currentprofilepage:", currentProfilePage);      
      console.log("inside effect cp.email:", currentProfilePage.Email);
      console.log("inside effect email", userEmail);    
      }
    };

      fetchUserData()
      .catch(console.error)
    },[currentProfilePage])

   
    
          return (
          
                <View style={styles.container}>
                      <View style={styles.emailContainer}>
                      {!currentProfilePage ? <Text style={styles.email}>Loading Data...</Text> :
                        <Text>{currentProfilePage.Email}</Text>
                      } 
                      </View>  
                </View>              
          
       
        );
      
}


const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    emailContainer:{
      backgroundColor: '#000000',
      height: '15%',
      padding: 10
    },
    list:{
      shadowColor: 'black',   
      shadowOpacity: 0.25,
      shadowOffset: {width: 0 , height: 2},
      shadowRadius: 8,
      borderRadius: 10,
      backgroundColor: 'white',
      elevation: 5,
      height: 300,
      width: 200,
      margin: 10
  },
    email: {
      fontSize: 15,
      color: 'gray'
  }
  });
  

export default MyProfileScreen;