how to change state with react-cookie?

Question

I'm trying to manage state using react cookies. If you hide the sidebar, true is saved, and it would be nice to have the sidebar automatically hidden on subsequent refreshes. Conversely, if it is in the expanded state, false is saved and it is in the expanded state when refreshed.

I wrote a simple code with this logic, but once it is hidden, even if it is expanded, it is still hidden when refreshed.

How do I fix this?

Below is a code sample.

function App() {
  const [openSide, setOpenSide] = useState(false);
  const [cookie, setCookie] = useCookies(['rememberSideBar']);
  const handleCookie = () => {
    setCookie('rememberSideBar', !cookie.rememberSideBar,{path: "/"});
  }
  useEffect(() => {
    // when have no cookie
    if(cookie.rememberSideBar == null)
      console.log("no cookie")
    //when cookie is exist
    else
    {
      if(cookie.rememberSideBar != openSide)
      setOpenSide(cookie.rememberSideBar)
    }
    console.log(openSide+"123"+cookie.rememberSideBar)
  },[])
  
  function handleSideBar(){
    //change state
    setOpenSide(!openSide)
    //cookie option
    setCookie('rememberSideBar', !openSide ,{path: "/"})
    console.log(openSide+"123"+cookie.rememberSideBar)
  }

  return (
    <div className="App">
      <CookiesProvider>
        <BrowserRouter>
          <HeaderSidbar openSide={openSide} setOpenSide={handleSideBar} />
          <Main openSide={openSide} />
        </BrowserRouter>
      </CookiesProvider>
    </div>
  );
}