React Error : Invalid hook call. Hooks can only be called inside of the body of a function component

I am at the beginning phase of my react learning. Right now, trying to create an application. Getting the above error. Below is the code

Tile.js

import React from 'react';
import styles from './Tile.module.css';

// Tile.js
const Tile = ({ text, onClick }) => {
  return (
    <div className={styles.tile} onClick={onClick}>
      {text}
    </div>
  );
};


export default Tile;

Onboarding.js

// Onboarding.js
import React from 'react';
import styles from './Onboarding.module.css';

const Onboarding = () => {
  // const questionsLeft = new Array(6).fill(null);
  // const questionsRight = new Array(6).fill(null);

  return (
  <>
  </>
  );
};

export default Onboarding;

LandingPage.js

// Landing.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
import Tile from '../Tile/Tile.js';
import styles from '../Tile/Tile.module.css';
import TileTextArray from '../Constants/constants.js';

const Landing = () => {
  const navigate = useNavigate();

  // const handleTileClick = () => {
  //   navigate('/onboarding');
  // };

  return (
    <div className={styles.tileContainer}>
      <Tile text={TileTextArray.Tile1Text} onClick={() => navigate('/onboarding')} />
      <Tile text={TileTextArray.Tile2Text} />
      <Tile text={TileTextArray.Tile3Text} />
      <Tile text={TileTextArray.Tile4Text} />
    </div>
  );
};

export default Landing;

App.js

// App.js
       import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
       import Landing from './Landing/LandingPage';
       import Onboarding from './Onboarding/Onboarding';
       import './App.css';
       
       function App() {
         return (
           <Router>
             <Routes>
               <Route path="/" element={<Landing />} />
               <Route path="/onboarding" element={<Onboarding />} />
             </Routes>
           </Router>
         );
       }
       
       export default App;

I don’t have any duplicate react version, and After executing npm ls react I got the below

├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]

I couldn’t figure out why this is failing. Requesting help!