Unintended state change

[incompletude]

For some reason, setting permissionCookie will trigger a state change on userCookie.

  const COOKIE_OPTIONS = { path: "/" }
  const USER_COOKIE_NAME = "cookie1"
  const PERMISSION_COOKIE_NAME = "cookie2"

  const [userCookieStore, setUserCookie, removeUserCookie] = useCookies([USER_COOKIE_NAME])
  const [permissionCookieStore, setPermissionCookie, removePermissionCookie] = useCookies([PERMISSION_COOKIE_NAME])

  useEffect(() => {
    setUserCookie(USER_COOKIE_NAME, { test: 1 }, COOKIE_OPTIONS)
  }, [])

  useEffect(() => {
    const userCookie = userCookieStore[USER_COOKIE_NAME]

    console.log(userCookie)
  }, [userCookieStore])

  setTimeout(() => {
    setPermissionCookie(PERMISSION_COOKIE_NAME, { test: 2 }, COOKIE_OPTIONS)
  }, 5000)

According to the docs, it should behave differently, since deps "let you optionally specify a list of cookie names your component depend on or that should trigger a re-render".