After creating my app top navbar, I tried adding a button to it that will link to a website I created and display it in my app body. The website I'm looking to index is actually a search engine built in Python that allows the user to enter keywords into the search bar and get results. Here's what I'm trying to get

the arrow shows where the site should appear without making the navigation bar disappear. I then inserted the following code into my top navigation bar code file:

<Button
        component={NavLink}
        activeClassName={classes.activeBtn}
        to="https://gkwhelps.herokuapp.com"
        className={classes.buttonItemMiddle}
      >
        {location.pathname == 'https://gkwhelps.herokuapp.com' ? (
          <Home fontSize="large" style={{ color: 'rgb(0,133,243)' }} />
        ) : (
          <HomeOutlined fontSize="large" />
        )}
      </Button> 

and this in my App.js file :

<ProtectedRoute
                            exact
                            path="https://gkwhelps.herokuapp.com"
                           
                          />

My app runs fine on my browser, but when I click the button indexing the other site, my app body shows a blank page (but my navbar remains visible) and I'm taken to next http://localhost:3000/https://gkwhelps.herokuapp.com by my application. I don't get any command line errors. So I took inspiration from the following askcodez question and modified my code for the button this way:

<Link to='https://gkwhelps.herokuapp.com'>
      <button type="button" className="btn btn-info">Button</button>
      </Link>

but I get exactly the same errors as before.