Developer menu shows errors in the app, but server launches successfully

I have some code for a React Application, and there’s no errors when the app is tested, but it shows a blank page in the server. Upon closer inspection, it shows things like “Invalid hook call” or “uncaught type error” within the browser developer window. These are the exact errors

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

Here’s the App.js files and the Index.js files. I’m using tailwindcss that’s imported in the index.css file. I haven’t yet made the pages for the links present in the header.

App.js

import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
  return (
    <div className="header flex justify-between items-center py-4 px-6">
      <div className="links flex justify-end w-2/3">
        <Link to="/" className="mx-4 text-purple-600 font-cursive"> Home </Link>
        <Link to="/services" className="mx-4 text-purple-600 font-cursive"> Services </Link>
        <Link to="/contact" className="mx-4 text-purple-600 font-cursive"> Contact </Link> </div>
      <div className="title"> <h1 className="text-3xl text-pink-600 font-cursive">The Salon</h1> </div> </div>);
};
export default Header;

Index.js –

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Header from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Header />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.