I created a website that allows requests from any domain that I deployed to heroku. So I'm looking to display it in my reactjs application. For this, I created a button whose click triggers the display of this site in my application via iframe. Here is my button code:

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

and I added these lines of code in my frontend App.js file:

<Route path='/searchEngine' component={() => { 
                          <iframe src="https://gkwhelps.herokuapp.com" title="Search engine"></iframe>
                          return null;
                          }}/>

It did create a button, but every time I click on it, I get redirected to localhost:3000/searchEngine (my frontend running on port 3000) and it shows a blank area where the iframe content should be displayed.According to me, my code is correct so I don't understand why this error. I thought it was a cors error, so I disabled it using an extension. But despite this, my react app still reacts the same. I want to specify that no request is sent to the backend of my application and that all the code of the iframe is present in the frontend