useEffect cleanup when triggered by state - reactjs

Question

I have a component that I trigger via a state object:
const Alerts = () => {
const alert = useStore((state) => state.alert);
const setAlert = useStore((state) => state.setAlert);
const alertsModalRef = useRef(null);
useEffect(() => {
console.log("TRIGGER");
if (alert) {
alertsModalRef.current?.present();
}
}, [alert]);
...
I trigger it with a button click from another component on different screens. For example:
export function UpdateSomething() {
const setAlert = useStore((state) => state.setAlert);
return (
<View>
<Button
title="Continue"
onPress={() => {
setAlert("something");
}}
/>
</View>
);
}
When I load my app and hit a triggering button, I see "TRIGGER" is printed once to the console. However, when I go to another screen and hit another button or even when I then go back to the first screen and hit the same button again, it then prints "TRIGGER" three times.
I suspect that I need to add some kind of cleanup method to the useEffect - but if so, what is the cleanup required there?
And if it's not that? what is going on?
Sorry, I realize this may have been asked in various forms a million times before. I read the docs and many posts, but still confused.
Update 1
As Drew recommended, I tested and saw the Alerts component is re-mounted whenever I visit a screen in my app, which is using React Navigation.
I also wrap each screen with the following Provider:
Navigator
const WrappedSearchScreen = withModalProvider(SearchScreen);
function SearchNavigator() {
const SearchStack = createStackNavigator();
return (
<SearchStack.Navigator>
<SearchStack.Screen
name="Search"
component={WrappedSearchScreen}
/>
...
</SearchStack.Navigator>
);
}
Provider
...
import { Alerts } from "./Alerts";
import { useStore } from "./store";
export const withModalProvider = (Component: FC) => () => {
const progressBarVisible = useStore((state) => state.progressBarVisible);
return (
<BottomSheetModalProvider>
<Component />
<Alerts />
<ProgressBar
indeterminate
color="green"
visible={progressBarVisible}
style={{ position: "absolute", bottom: 0, left: 0 }}
/>
</BottomSheetModalProvider>
);
};