How to use the react-cookie.useCookies function in react-cookie

function ProfileCard(props) {
  const [cookies] = useCookies(['user'])
  const [location, setLocation] = useState({})

  var user

  if (props.isMe){
      user = cookies.user
     // user.avatar = props.user.avatar
  }
  else
    user = props.user



  // async function please() {
  //   await geocodeLocation()
  //   if (formattedAddress === "")

function CommentPreview({id, authorId, articleId, author,   body, date, lastEditDate}) {
  const [cookies, setCookie, removeCookie] = useCookies(['userToken', 'user' ]);
  const [count, setCount] = useState(0);
  var deleteBtn;
  const loggedIn = !!cookies.userToken;
  useEffect(() => {
    // Update the document title using the browser API
    //if(count>0) window.location.reload();
  });

  function handleDelete(){

    var path = app_config.api_url+"/article/"+articleId+"/comment/"+id;
    deleteRequest({url:path, success:()=>{}, authToken:cookies.userToken })
    setCount(count+1);
  }
  if(loggedIn && (cookies.user._id == authorId)){
    deleteBtn =

function NavBar(props) {
  const [cookies, setCookie, removeCookie] = useCookies(['user', 'userToken', 'pendingRequests'])

  var profileBtn, logoutBtn, notificationBtn, registerBtn, loginBtn;

  const [loggedIn, login] = useState(!!cookies.userToken);
  const [notificationCount, setNotificationCount] = useState(0);

  const { acceptFollowRequest, rejectFollowRequest } = props;

  const logout = function () {
    console.log(cookies);
    removeCookie('userToken');
    removeCookie('user');
    login(false);
  }
  if (!!loggedIn) {
    profileBtn = <li> &nbsp;</li>

function App() {
  const [cookies, setCookie] = useCookies(['name']);

  function onChange(newName) {
    setCookie('name', newName, { path: '/' });
  }

  return (
    <div>
      
      {cookies.name &amp;&amp; <h1>Hello {cookies.name}!</h1>}
    </div>
  );
}

export const LoginPage: FC = memo(function LoginPage() {
  const classes = useStyles();
  const me = useMe();
  const [name, setName] = useState("");
  const [cookies, , removeCookie] = useCookies(["error"]);
  const { projectName } = useParams<{ projectName?: string }>();
  const history = useHistory();

  const handleCloseErrorAlert = (): void => {
    removeCookie("error");
  };

  const handleOnContinue = (e: React.FormEvent): void => {
    e.preventDefault();
    history.push(`${PAGE_PATH_LOGIN}/${name}`);
  };

  return (
    <div>
      {me &amp;&amp; me.isLogin &amp;&amp; }
      {cookies.error &amp;&amp; (</div>

export function useAuth() {
  const [cookies, setCookie] = useCookies([AUTH_COOKIE_NAME])
  const [token, setToken] = useState(null)
  const router = useRouter()

  useEffect(() => {
    let token = cookies[AUTH_COOKIE_NAME]

    if (!token) {
      const { token: tokenFromURL } = getAuthDataFromCallbackURL(router.query)

      if (tokenFromURL) {
        setCookie(AUTH_COOKIE_NAME, tokenFromURL, {
          path: '/',
          expires: new Date(getDataFromToken(tokenFromURL)['exp'] * 1000),
        })
      }

export default function useAuth() {
  const [token, setToken] = useState(null)
  const router = useRouter()
  const [cookies, setCookie] = useCookies([AUTH_COOKIE_NAME])

  useEffect(() => {
    let token = cookies[AUTH_COOKIE_NAME]

    if (!token) {
      const tokenFromURL = get(router.query, 'token', false)

      if (tokenFromURL) {
        const payload = getDataFromToken(tokenFromURL)
        const expires =
          get(payload, 'exp') ||
          Math.floor(Date.now() / 1000) + AUTH_COOKIE_MAX_AGE

        setCookie(AUTH_COOKIE_NAME, tokenFromURL, {
          path: '/',
          expires: new Date(expires * 1000),

function App() {
  let [cookies, setCookie, removeCookie] = useCookies(['user', 'userToken', 'pendingRequests']);
  const [notifications, setNotifications] = useState([])

  useEffect(() => {
    getNotifications()
  }, [])

  function getNotifications() {
    get({
      url: app_config.api_url + "/notification",
      success: (resp) => setNotifications(resp),
      authToken: cookies.userToken
    })
  }

  function acceptFollow(id) {
    if (!!cookies.userToken) {

export default function App() {
  const { hash } = window.location;
  const [open, toggleDrawer] = useDrawer();
  const [cookies, setCookie] = useCookies([TYPEKEV_SITE_PREFERS_COLOR_SCHEME]);

  const SELECTED_COLOR_SCHEME =
    cookies[TYPEKEV_SITE_PREFERS_COLOR_SCHEME] || getPrefersColorScheme();

  const theme = getMuiTheme(SELECTED_COLOR_SCHEME);

  return (
    
      {getHelmet(SELECTED_COLOR_SCHEME === COLOR_SCHEME_CODE_MAP.DARK)}

function Portfolio({portfolio, isMe}){
  const [cookies, setCookie, removeCookie] = useCookies(['userToken'])
  const [stocksShown, showStocks] = useState(false);
  const [stockAddShown, showStockAdd] = useState(false);
  const [newStock, setNewStock] = useState({});
  const [stockList, setStockList] = useState([]);
  const [addStockList, setAddStockList] = useState([]);
  const [searchbarText, setSearchbarText] = useState("");
  const [originalStockList, setOriginalStockList] = useState([]);

  var handleChange = function(event) {
    setNewStock({name: event.target.value});
  };
  var onAddSelected = function() {
    addStockList.map(stock => {
      const request_url = app_config.api_url + "/portfolio/" + portfolio._id + "/stock";
      var index = -1;
      for (var i = 0; i < stockList.length; i++) {