So, I'm doing some assignment and I get the following error when running my react app (Should be a dynamic URL like /item/n):

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    at Routes (http://localhost:3000/static/js/bundle.js:35605:5)
    at Router (http://localhost:3000/static/js/bundle.js:35538:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:35014:5)

index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { 
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";
import ProductMainView from './components/productMainView'


const rootElement = document.getElementById('root')

ReactDOM.render(
  <Router>
    <Routes>
      <Route exact path="/item/:item_id" 
         element={(props) => <ProductMainView id={props.params.id} />} />
    </Routes>
  </Router>,
  rootElement
);

productMainView.jsx:

import React, { Component } from 'react'

class ProductMainView extends Component {
    componentDidMount() {
        console.log(this.props)
        let id = this.props.match.params.item_id
    }
    render() {
        return <h1>Placeholder</h1>   
    }
}

export default ProductMainView

Yes, I know that class-based component are kinda obsolete, but I'm limited by the assignment.

Note: If the method of getting the id to the component is wrong, other ways would be welcome.

Note v2: I'm usign react-router v6.2.2