`i get maximum depth error when i change context within useEffect even with empty dependency array,the error doesnt happen when i change it with a button , Here is the code

App.js

    function Alpha() {
     const ctx = useContext(contexts);

     function ShareComponnet() {
     return (
      <Stack.Navigator>
        <Stack.Screen name="Shares" component={ShareScreen} />
      </Stack.Navigator>
     );
       }

     return (
      <NavigationContainer>
       <Drawer.Navigator
        backBehavior="history"
        screenOptions={{
          headerStyle: { backgroundColor: "#EDC9AF" },
          headerTintColor: "#A81C07",
          drawerStyle: { backgroundColor: "#EDC9AF" },
          drawerActiveBackgroundColor: "#A81C07",
          drawerActiveTintColor: "white",
        }}
        >
        <Drawer.Screen component={ShareComponnet} name="Share" />
       </Drawer.Navigator>
       </NavigationContainer>
      );
     }

    export default function App() {
     return (
      <ContextHelper>
       <Alpha />
      </ContextHelper>
       );
       }

ShareScreen

    function ShareScreen() {
     const context = useContext(contexts);

     function contextChecker() {
        context.setIngrediants([]);
        console.log(context);
    }

    useEffect(() => {
        contextChecker();
     }, []);

    return (
        <View
            style={{
                flex: 1,
                backgroundColor: "#EDC9AF",
                justifyContent: "center",
                alignItems: "center",
            }}
        >
            <Button title="Change" onPress={contextChecker} />
            <Text>HELLO</Text>
        </View>
     );
    }

    export default ShareScreen;

Context.js

    import { createContext, useState } from "react";

    export const contexts = createContext();
    function ContextHelper({ children }) {
     const [ingrediants, setIngrediants] = useState([]);

     const value = {
     ingrediants: ingrediants,
     setIngrediants: setIngrediants,
    };

    return <contexts.Provider value={value}>{children}</contexts.Provider>;
  }

    export default ContextHelper;

and these are the logs i get

    {"ingrediants": [], "setIngrediants": [Function bound dispatchSetState]}
    LOG  {"ingrediants": [], "setIngrediants": [Function bound dispatchSetState]}
    LOG  {"ingrediants": [], "setIngrediants": [Function bound dispatchSetState]}
    LOG  {"ingrediants": [], "setIngrediants": [Function bound dispatchSetState]}
    LOG  {"ingrediants": [], "setIngrediants": [Function bound dispatchSetState]}
    LOG  {"ingrediants": [], "setIngrediants": [Function bound dispatchSetState]}
    ERROR  Warning: Maximum update depth exceeded. This can happen when a component calls            setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at createNativeStackNavigator.tsx:71)
    in NativeStackNavigator (at App.js:20)
    in ShareComponnet (at SceneView.tsx:132)

I have no idea which component is causing the error. This error didnt use to happen when i had no Alpha function , but I still need to access and change the context where all routes are placed.Is it caused by the way app function wrapped the alpha function?