Invariant Violation: Maximum update depth exceeded using react Navigation v5

I have a login screen which I have placed in stack. After user logs in successfully he is redirected to home screen which is a drawer screen. One of the options of drawer screen is logout, so on click of it user should be logged out. Following is my code for logout screen. I am just showing a progress bar in logout screen in ui but in useEffect hook, I am calling the following code

 navigation.reset({
        routes: [{name: LOGIN_SCREEN}],
      });

I also tried calling the above method in useLayoutEffect but then the logout button just hangs.

My Navigation stack looks something as follows

  <Stack.Screen
    name={LOGIN_SCREEN}
    component={LoginScreen}
    options={{headerShown: false}}
  />
 <Stack.Screen
    name={HOME_STACK_SCREEN}
    component={DrawerStack}
    options={{headerShown: false}}
  />...

My drawer component as follows

<Drawer.Navigator
      drawerStyle={{backgroundColor: BLUE_COLOR_1}}
      drawerContentOptions={{labelStyle: {color: '#FFF'}}}>
      <Drawer.Screen
        name={HOME_SCREEN}
        component={Home}
        options={{
         ...
        }}
      />
     <Drawer.Screen
        name={LOGOUT_SCREEN}
        component={Logout}
        options={{
         ...
        }}
      />

Source: React natvie