I'm currently trying to assign different objects to a let variable using if statements before displaying it. For some reason, assigning the object in a function will result in the variable displaying nothing instead of displaying the assigned object.

Let me give an example:

In the following code I am assigning 2 different icons to a let variable depending on a prop I passed from another file and the result matches exactly what I'm looking for.

    const BottomBar = ({ screen }) => {
        let icon;

        if (screen === 'Home') {
            icon = (<Entypo name='home' size={30} color='white'/>);
        } else {
            icon = (<SimpleLineIcons name='home' size={24} color='white'/>);
        }

        return (
            <View>{icon}</View>
        );
    }

However, if I was to re-attempt this same example with a combination of a function with the useEffect hook, the {icon} object displays nothing.

    const BottomBar = ({ screen }) => {
        let icon;

        const checkScreen = () => {
            if (screen === 'Home') {
                icon = (<Entypo name='home' size={30} color='white'/>);
            } else {
                icon = (<SimpleLineIcons name='home' size={24} color='white'/>);
            }
        };

        useEffect(() => {
            checkScreen();
        });

        return (
            <View>{icon}</View>
        );
    }

Right away, I can assume this is because the function is asynchronous. The let variable "icon" is being used before assigning it with an object. So a simple fix would be something such as the following:

     const BottomBar = ({ screen }) => {
        const checkScreen = () => {
            if (screen === 'Home') {
                return (<Entypo name='home' size={30} color='white'/>);
            } else {
                return (<SimpleLineIcons name='home' size={24} color='white'/>);
            }
        };

        let icon = checkScreen();

        return (
            <View>{icon}</View>
        );
    }

But what if I want to re-assign the variable icon with a different object later on after a button is pressed. Simply assigning an object right away doesn't allow me to re-assign it later. What I would like to do is assign the object as needed. What am I missing? Am I passing the variable wrong or is this simply not possible?