pure javascript way to bootstrap navbar dropdown

So I am trying to make the dropdown in the below code work with javascript as I noticed that the CSS code will only trigger the dropdown after a user first clicks on the drop down. after that it will let the css hover code work as per normal.

So needing a Javascript way to get this drop down to work.

import React, { useState  } from "react";
import {Nav, Navbar, NavDropdown, ButtonToolbar, Button } from "react-bootstrap";
import { withRouter } from "react-router";

import '../App.css';

const Header = props => {
    const { location } = props;

    function changeBackground(e) {

    return (
        <Navbar bg="transparent" variant="dark" expand="lg">
        <Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto" activeKey={location.pathname}>
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/advertisers">Advertisers</Nav.Link>
            <NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight 

                <NavDropdown.Item href="/publishers/radio">Radio Stations</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="/publishers/podcasters">Audio Podcasters</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="/publishers/videopodcasters">Video Podcasters</NavDropdown.Item>

            <Nav.Link href="/case-studies">Case Studies</Nav.Link>
                <Button href="/contact" variant="success" size="lg" className="button-round">
                    Contact Us

  const HeaderWithRouter = withRouter(Header);
  export default HeaderWithRouter;

Source: ReactJs