So in my website, I am using react-cookie's useCookie() hook to read and store cookies. However, it seems that useCookie() stores the value of the cookie on first render only and does not change its value when a change happens from an outside source.

For example, in my code I defined

  const [cookies, setCookie, removeCookie] = useCookies();

in my login page and I want to check if a cookie exists on click of the login button. For this I am using:

cookies["deviceToken-" + email]? cookies["deviceToken-" + email]: "",

but there is one case in which I am finding a problem. If the user is on the LogIn page, the value of the cookie is directly stored inside the cookies variable from the useCookie() hook. But then the user decides to manually delete the cookie from the browser from the Application tab while in the inspect. After this they click on the log in button.

doing so will read the previously saved value for cookies["deviceToken-" + email] and won't detect that it has been deleted.

How can I update the value of cookies or detect that the cookie has been deleted before or during the LogIn function is taking place?