Reactjs – React Invalid Hook Call Warning in BrowserRouter Component

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faImage } from '@fortawesome/free-solid-svg-icons';
import "./App.css";
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

const galleryData = [
  {
    id: 1,
    imageUrl: 'https://images.unsplash.com/photo-1593053109521-e86fd978ba96?q=80&w=1674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    title: 'Beautiful Sunset',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
}
];

const Home = () => (
  <div className="App">
    <Nav />
    <div className='heading' style={{ display: "flex" }}>
      <FontAwesomeIcon icon={faImage} size='lg' />
      <h2>Image Gallery</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <button title='View More'>
      <Link to="/gallery">See Images</Link>
    </button>
  </div>
);

const Gallery = () => (
  <div className="App">
    <Nav />
    <div className='heading' style={{ display: "flex" }}>
      <FontAwesomeIcon icon={faImage} size='lg' />
      <h2>Image Gallery</h2>
    </div>
    <div className='gallery'>
      {galleryData.map(item => (
        <div key={item.id} className="gallery-item">
          <img src={item.imageUrl} alt={item.title} />
          <div className="caption">
            <h1>{item.title}</h1>
            <p>{item.description}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const Nav = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/gallery">Gallery</Link>
      </li>
      {/* Add more navigation links as needed */}
    </ul>
  </nav>
);

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" exact component={Home} />
        <Route path="/gallery" component={Gallery} />
      </Routes>
    </Router>
  )};

export default App;

I’ve checked for the common reasons mentioned in the warning message, such as version mismatches and breaking the Rules of Hooks, but I couldn’t identify the root cause. The error seems to be related to the BrowserRouter component.

Any insights or suggestions on how to debug and resolve this issue would be greatly appreciated.