Struggling to solve "ApolloProvider was not pased a client instance."

I have read multiple articles and items trying to solve this problem. I think I have a problem with the way that I have formatted my code but cannot figure out where the error is located. I am currently just trying to get anything to pass onto the page so I can start formatting the site.

This is the code that I have for the page, please let me know if I need to add another files code:

App.js

import './App.css';
import { ApolloProvider } from "@apollo/client";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from './pages/Home'
import Footer from './components/Footer'
import Header from './components/Header'


function App() {
  return (
    <ApolloProvider>
      <Router>
        <Header />
        <Routes>
          <Route
            path="/"
            element={<Home />}
            />
        </Routes>
        <Footer />
      </Router>
    </ApolloProvider>
  );
}

export default App;

index.js

import { StrictMode } from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById('root')
const root = createRoot(rootElement)

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

package.json

  "dependencies": {
    "@apollo/client": "^3.5.8",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^0.2.4",
    "graphql": "^15.4.0",
    "apollo-link": "^1.2.14",
    "apollo-link-error": "^1.1.13"

Home.js

import React from 'react'

const Home = () => {
    return (
        <main> 
            <p>This is the home page! Hello </p>
        </main>
    )
}

export default Home

Here is the error that I am receiving:

According to the Apollo documentation you need to create a client that will point to the GraphQL server:

const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <Router>
        <Header />
        <Routes>
          <Route
            path="/"
            element={<Home />}
            />
        </Routes>
        <Footer />
      </Router>
    </ApolloProvider>
  );
}