react-router-dom v6.15.0 not routing components

Question

In short, I have test page "Test.js" with just hello word and I am trying to hit url http://localhost:3000/Test/66 which gives the error

Cannot read properties of undefined (reading 'fn')" while using the Route "<Route path="/test/:id" element={} />"

In App.js

import React from "react";
import { Component } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/common/Header";
import Footer from "./components/common/Footer";
import Home from "./components/Home";
import Error from "./components/Error";
import Product from "./components/Product";
import Cart from "./components/Cart";
import Checkout1 from "./components/Checkout1";
import Checkout2 from "./components/Checkout2";
import Checkout3 from "./components/Checkout3";
import Checkout4 from "./components/Checkout4";
import Contact from "./components/Contact";
import Faq from "./components/Faq";
import Register from "./components/Register";
import Terms from "./components/Terms";
import About from "./components/About";
import Test from "./components/Test";
class App extends Component {
  state = {
    cartCounter: 0,
    products: [],
  };
  // handleAddToCart = (data) => {
  //   console.log("Add to Card changed...");
  //   //!Better mechanism to be implemented later....
  //   const productsReplica = this.state.products;
  //   productsReplica.push(data);
  //   const cartCounter = (this.state.cartCounter += 1);
  //   this.setState({ products: productsReplica, cartCounter: cartCounter });
  // };
  render() {
    console.log("Home State : ", this.state);
    return (
      <React.Fragment>
        <Header cartCounter={this.state.cartCounter} />
        <Routes>
          {/* <Route index element={<Home />} /> */}
          <Route path="/test/:id" element={<Test />} />
          <Route path="/product/:sku" element={<Product />} />
          <Route path="product" element={<Product />} />
          <Route path="cart" element={<Cart />} />
          <Route path="checkout1" element={<Checkout1 />} />
          <Route path="checkout2" element={<Checkout2 />} />
          <Route path="checkout3" element={<Checkout3 />} />
          <Route path="checkout4" element={<Checkout4 />} />
          <Route path="contact" element={<Contact />} />
          <Route path="register" element={<Register />} />
          <Route path="faq" element={<Faq />} />
          <Route path="about" element={<About />} />
          <Route path="terms" element={<Terms />} />
          <Route path="/" element={<Home />} />
          <Route path="*" element={<Error />} />
        </Routes>
        <Footer />
      </React.Fragment>
    );
  }
}

export default App;

In Test.js

export default function Test() {
  return <h1>Hello World</h1>;
}

I had started problem routing my main pages so I created Test Page and added in App.js routes to determine the cause of error but still the same error occurs. I have tried so many answers but they are old not relevant to this version. Please do help if I need to downgrade the version or something else which may work.