hamburger not hiding using react-burger-menu

I am learning how to use react-burger-menu library and I am having an issue when changing the state to hide the menu. OnClick the links on the menu change the state but it takes two clicks to actually hide the menu. Any ideas what am I doing wrong here?

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { slide as Menu } from "react-burger-menu";

const Navbar = () => {
  const [open, setOpen] = useState(false);

  console.log('state of menu:', open)

  return (
    <div>
         <Menu noOverlay isOpen={open} right>
            <Link to={`/profile/${userId}`} onClick={() => setOpen(!open)}>
              Profile
             </Link>
             <Link to={`/favorites/${userId}`} onClick={() => setOpen(!open)}>
              Favorite posts
             </Link>
             <Link to="/Settings" onClick={() => setOpen(!open)}>
              Settings
             </Link>
    </div>
  );
};

Thank you in advance for your help!!