How can I navigate to different pages when the navbar has several defined elements and functions that prevent Router from being used?

Question

I wanted to create an interactive and attractive navigation bar, and from the tutorials I've followed, it seems as though React Router is unable to be incorporated. 

import './navbar.css';
import { ReactComponent as BellIcon } from './icons/bell.svg';
import { ReactComponent as CaretIcon } from './icons/caret.svg';
import { ReactComponent as ChevronIcon } from './icons/chevron.svg';
import { ReactComponent as ArrowIcon } from './icons/arrow.svg';
import { ReactComponent as DiscordIcon } from './icons/Discord.svg';
import { ReactComponent as BookIcon } from './icons/book-solid.svg';
import { ReactComponent as GoalIcon } from './icons/bullseye-solid.svg';
import { ReactComponent as CoinsIcon } from './icons/coins-solid.svg';
import { ReactComponent as ScrollIcon } from './icons/scroll-solid.svg';
import { ReactComponent as GavelIcon } from './icons/gavel-solid.svg';
import { ReactComponent as SocialIcon } from './icons/user-solid.svg';
import { ReactComponent as InstagramIcon } from './icons/instagram-brands.svg';
import { ReactComponent as RedditIcon } from './icons/reddit-alien-brands.svg';
import { ReactComponent as SpotifyIcon } from './icons/spotify-brands.svg';
import { ReactComponent as SoundCloudIcon } from './icons/soundcloud-brands.svg';
import { ReactComponent as MusicIcon } from './icons/headphones-solid.svg';
import { ReactComponent as HandIcon } from './icons/hand-sparkles-solid.svg';
import { ReactComponent as ForteIcon } from './icons/fortelogo.svg';
import React, { useState, useEffect, useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
import GetInvolved from '../pages/getinvolved';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function NavbarFinal() {
  return (

    <Navbar>
        <NavLogo icon={<ForteIcon />} />
        <NavItem icon={<BellIcon />}>
        </NavItem>
        <NavItem icon={<DiscordIcon />}>
          <DiscordLink/>
        </NavItem>
        <NavItem icon={<CaretIcon />}>
          <DropdownMenu></DropdownMenu>
        </NavItem>
    </Navbar>
 
       



  );
}

function Navbar(props) {
  return (
    <nav className="navbar">
      <ul className="navbar-nav">{props.children}</ul>
    </nav>
  );
}

function NavItem(props) {
  const [open, setOpen] = useState(false);

  return (
    <li className="nav-item">
      <a href="#" className="icon-button" onClick={() => setOpen(!open)}>
        {props.icon}
      </a>

      {open && props.children}
    </li>
  );
}

function NavLogo(props) {
  const [open, setOpen] = useState(false);

  return (
    <li className="logo-item">
      <a href="#" className="logo-item" onClick={() => setOpen(!open)}>
        {props.icon}
      </a>

      {open && props.children}
    </li>
  );
}



function DiscordLink () {
  window.location.href="https://discord.gg/VCCPMBugKZ";
}

function DropdownMenu() {
  const [activeMenu, setActiveMenu] = useState('main');
  const [menuHeight, setMenuHeight] = useState(null);
  const dropdownRef = useRef(null);

  useEffect(() => {
    setMenuHeight(dropdownRef.current?.firstChild.offsetHeight)
  }, [])

  function calcHeight(el) {
    const height = el.offsetHeight;
    setMenuHeight(height);
  }

  function DropdownItem(props) {
    return (
      <a href="#" className="menu-item" onClick={() => props.goToMenu && setActiveMenu(props.goToMenu)}>
        <span className="icon-button">{props.leftIcon}</span>
        {props.children}
        <span className="icon-right">{props.rightIcon}</span>
      </a>
    );
  }

  function DropdownItem1(props) {
    return (
      <Link to component= {<GetInvolved />} className="menu-item">
        <span className="icon-button">{props.leftIcon}</span>
        {props.children}
        <span className="icon-right">{props.rightIcon}</span>
      </Link>
    );
  }

  return (
    <div className="dropdown" style={{ height: menuHeight }} ref={dropdownRef}>

      <CSSTransition
        in={activeMenu === 'main'}
        timeout={500}
        classNames="menu-primary"
        unmountOnExit
        onEnter={calcHeight}>
        <div className="menu">
          <DropdownItem
            leftIcon={<BookIcon />}
            rightIcon={<ChevronIcon />}
            goToMenu="about">
            About
          </DropdownItem>
          <DropdownItem
            leftIcon= {<SocialIcon />}
            rightIcon={<ChevronIcon />}
            goToMenu="socials">
            Socials
          </DropdownItem>
          <DropdownItem
            leftIcon={<MusicIcon />}
            rightIcon={<ChevronIcon />}
            goToMenu="music">
            Music
          </DropdownItem>
          <DropdownItem1  
              leftIcon = {<HandIcon/>}
              onClick={ <GetInvolved/>}>
              Get Involved
          </DropdownItem1>
        </div>
      </CSSTransition>

      <CSSTransition
        in={activeMenu === 'about'}
        timeout={500}
        classNames="menu-secondary"
        unmountOnExit
        onEnter={calcHeight}>
        <div className="menu">
          <DropdownItem goToMenu="main" leftIcon={<ArrowIcon />}>
            <h2>About</h2>
          </DropdownItem>
          <DropdownItem leftIcon={<GoalIcon />}>Mission</DropdownItem>
          <DropdownItem leftIcon={<CoinsIcon />}>How It Works</DropdownItem>
          <DropdownItem leftIcon={<GavelIcon />}>Governance</DropdownItem>
          <DropdownItem leftIcon={<ScrollIcon />}>White Paper</DropdownItem>
        </div>
      </CSSTransition>

      <CSSTransition
        in={activeMenu === 'socials'}
        timeout={500}
        classNames="menu-secondary"
        unmountOnExit
        onEnter={calcHeight}>
        <div className="menu">
          <DropdownItem goToMenu="main" leftIcon={<ArrowIcon />}>
            <h2>Socials</h2>
          </DropdownItem>
          <DropdownItem leftIcon={<DiscordIcon />}>Discord</DropdownItem>
          <DropdownItem leftIcon={<InstagramIcon />}>Instagram</DropdownItem>
          <DropdownItem leftIcon={<RedditIcon />}>Reddit</DropdownItem>
        </div>
      </CSSTransition>

      <CSSTransition
        in={activeMenu === 'music'}
        timeout={500}
        classNames="menu-secondary"
        unmountOnExit
        onEnter={calcHeight}>
        <div className="menu">
          <DropdownItem goToMenu="main" leftIcon={<ArrowIcon />}>
            <h2>Music</h2>
          </DropdownItem>
          <DropdownItem leftIcon={<SpotifyIcon />}>Spotify</DropdownItem>
          <DropdownItem leftIcon={<SoundCloudIcon />}>SoundCloud</DropdownItem>
        </div>
      </CSSTransition>
    </div>
    
  );
}

    

export default NavbarFinal;

I tried many different variations and am at a loss. My focus is on the items of the dropdown menu. Routes and Route components cannot contain any other components - and this is probably the biggest roadblock I came across when trying to restructure my code. If this doesn't work, I will obviously need to reformat the navbar to something basic, but as this is an independent project and I wanted to learn to code more sophisticated frontends, any help that could help lead me in the right direction to figure this out would be great.