How can I hide the navigation bar between roles ('Admin' & 'user') in React js
Example

  const [currentUser, setCurrentUser] = useState("");
  const [role, setRole] = useState("");
  let navigation = [];

  useEffect(async () => {
    // get user from Local storage 
    const user = authService.getCurrentUser();
    if (!user) return;
    setCurrentUser(user);
    // get Role from Database 
    currentUser && setRole(authService.getRoleByUserId(currentUser.id));

    console.log(currentUser);
  }, [currentUser.id]);

  if (currentUser && role === "Admin") {
    navigation = [
      { name: "Home", href: "/Home", action: false, icon: false },
      { name: "Vendors", href: "/vendors", action: false, icon: false },
      { name: "Pricing", href: "/pricing", action: false, icon: false },
      { name: "Profile", href: "/profile", action: false, icon: false },
      { name: "Sign Out", href: "/", action: false, icon: false },
      { name: "", href: "/Cart", action: false, icon: true },
    ];
  } else {
    navigation = [
      { name: "Home", href: "/Home", action: false, icon: false },
      { name: "Pricing", href: "/pricing", action: false, icon: false },
      { name: "Sign In", href: "/login", action: false, icon: false },
      { name: "", href: "/Cart", action: false, icon: true },
    ];
  }

  return (
   ...

      

How can i do something this? Suggestions are always appreciated.