How to bring a value from a Modal button back to the useEffect (NextJS)

Question

I'm trying to setCookie after the openModal() calling. However, I believe after the Modal opens, it breaks the useEffect flow, and the next command isn't applied! Could you help me bring that solution! I just wanted to storage the value in a cookie the way I can redirect the user to the right chosen option.

import { Button, Modal } from "@mui/material";
import { parseCookies, setCookie } from "nookies";
import React, { useEffect, useState } from "react";
import getLocale from "../../../utils/getLocale";
import getAlternativeLink from "../../../utils/getAlternativeLink";
import { useRouter } from "next/router";

const LangModal = () => {
  const locale = getLocale();

  const [isOpen, setOpen] = useState(false);
  const [userOptionLanguage, setUserOptionLanguage] = useState("");
  let once = false;

  const cookies = parseCookies();

  useEffect(() => {
    once = true;
    const userLanguage = (
      window.navigator.userLanguage || window.navigator.language
    ).toLowerCase();

    if (cookies.language !== undefined && userLanguage === "pt-br") {
      goToPortugueseVersion();
    }

    if (cookies.language === undefined && userLanguage !== locale) {
      openModal();

      /** 
       * 
       * SOME HOW AROUND HERE THERE MUST BE A BREAK. 
       * A LITTLE BECAUSE IT SEEMS NOT COMING BACK TO THE USEFFECT
       * 
       * No console.log (EVEN IT IS UNCOMMENTED)! 
       * console.log("userOption", userOptionLanguage);
       * 
       */

      setCookie(null, "language", `${userOptionLanguage}`, {
        path: "/",
        maxAge: 0,
      });
      console.log("[language chosen]: ", cookies.language);
    }

    if (cookies.language === "pt-br") {
      goToPortugueseVersion();
    }
  }, []);

  const openModal = () => {
    setOpen(true);
  };

  const closeModal = () => {
    setOpen(false);
  };

  const handleUserOptionLanguage = (language) => {
    console.log(language);
    setUserOptionLanguage(language);
  };

  const goToPortugueseVersion = () => {
    const url = getAlternativeLink();
    useRouter.push(url);
  };

  return (
    <>
      <Modal open={isOpen}>
        <div>
          <button onClick={() => closeModal()}>x</button>
          <button onClick={() => handleUserOptionLanguage("en-us")}>
            English
          </button>
          <button onClick={() => handleUserOptionLanguage("pt-br")}>
            Portuguese
          </button>
          <h2>Which language does it make sense for you? </h2>
          {/*  <Button variant="contained" color="primary" onClick={() => createCookie("en-us")}>
            English
          </Button>
          <Button variant="contained" color="secondary" onClick={() => createCookie("pt-br")}>
            Portuguese
          </Button> */}
        </div>
      </Modal>
    </>
  );
};

export default LangModal;