<Link> tag not opening link, but shows in html

I use the <Link> tag on logo and callToActions to direct the user to the respective pages, but they do not seem to responsive although it does show up in the inspector.

Here is the code of my Header component:

const Header = props => {
return (
    <header className='header'>
        <div className='wrap'>
            <div className='logo'>
                <Link to='/'>
                    <img src={Logo}/>
                </Link>
            </div>

            <div className='callToActions'>
                <ul>
                    <li>
                        <Link to='/registration'>
                            Register
                        </Link>
                    </li>
                </ul>
            </div>
        </div>
    </header>
  );
}

Here's a screenshot of the inspector tool: the screenshot

I tried running on different browsers, it didn't work. Any help would be appreciated, thanks!

Edit:

Here's the app.js where Router has been used:

function App() 
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" render = {() => (
          <HomepageLayout>
            <Homepage />
          </HomepageLayout>
        )} />
        <Route path="/registration" render={() => (
          <MainLayout>
            <Registration />
          </MainLayout>
        )} />
      </Switch>
    </div>
  );
}

Edit 2:

I apologize, the BrowserRouter is at index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; 
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

I was following a Youtube tutorial: https://youtu.be/_lS9zphSBxk?t=1627