button updating state when it is not supposed to

Question

I have almost implemented this slider button to do exactly what I want but unfortunately I have noticed a small bug. To give context, I have a home page with a slider button on it. When I press the button, it renders a new screen. I also have a bottom tab screen named Screen3. The goal is to press a button on Screen3 that moves the slider button as well as render a new screen.

I have almost successfully implemented this. At first glance when you go to Screen3 and press the text, you can see it works as I hoped. However there is a small bug and if you follow these steps you can reproduce exactly what I am referring to.

I have supplied some of the code below but this snack demo provides everything you need. Just make sure you run it in IOS or Android

To reproduce the bug, please do the following...

1.) Click on Screen3 in the bottom tab bar and then click the text. It will take you to the "Map" screen as well as change the slider button. This is exactly what I want

2.) Now click on the slider button, specifically List. It will change the screen back to where it originally was

3.) Now for the bug, if you then click back to screen3 and then immediately click the Home page again on the bottom tab bar, you can see the bug I am referring to. It changes the button to the "Map" screen even though it is not rendered.

Here is most of the code, you might be able to debug looking at home and slider I have provided. The demo has the rest of the code.

App.js

function MyTabs() {
  return (

    <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
      <Stack.Screen name="Screen1" component= {ListHome} options={{headerShown: false}}/> 
       <Stack.Screen name="Screen2" component= {MapHome} options={{headerShown: false}}/>
    </Stack.Navigator>
);
}


export default function App() {

  return (
   <NavigationContainer>
    <Tab.Navigator
    initialRouteName="Home"
    screenOptions={{
      tabBarActiveTintColor: '#F60081',
      tabBarInactiveTintColor: '#4d4d4d',
      tabBarStyle: {
        backgroundColor: '#d1cfcf',
        borderTopColor: 'transparent',
      },
    }} 
  >
    <Tab.Screen
      name="Home"
      component={MyTabs}
      options={{
        tabBarLabel: 'Home',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />

     <Tab.Screen
      name="Screen3"
      component={Screen3}
      options={{
        tabBarLabel: 'Screen3',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="account-group" color={color} size={size} />
        ),
      }}
    />
    
  </Tab.Navigator>
</NavigationContainer>
);
}

Home.js

  const [isVisile, setIsVisible] = React.useState(true);
  const [whichComponentToShow, setComponentToShow] = React.useState("Screen1");
  
  React.useEffect(() => {
    if(route.params && route.params?.componentToShow) {
      setComponentToShow(route.params?.componentToShow);
      goToMap()
    }
  }, [route.params]);


  const goToMap = () => {
    setComponentToShow("Screen2");
  }

  const goToList = () => {
    setComponentToShow("Screen1");
  }

  return(
    <View style={{backgroundColor: '#d1cfcf' ,flex: 1}}>
      {whichComponentToShow === 'Screen1' && <ListHome />}
      {whichComponentToShow === 'Screen2' && <MapHome />}
      <View style={{position: 'absolute', top: 0, left: 0, right: 1}}>
        <Top3
          renderMap={goToMap}
          renderList={goToList}
          active={route.params && route.params?.componentToShow==='Screen2'|| false}
        /> 
      </View>
    </View>
  );
}

export default Home;

The top of slider.js

  
  const [active, setActive] = useState(false)
  let transformX = useRef(new Animated.Value(0)).current;

    useFocusEffect( React.useCallback(()=>{
    setActive(Boolean(props.active))
    console.log(props.active)
  },[props.active]))