Using render in React-router-V6 doesn't show anything

I have Navbar and I used React-router to access them. I wrote these codes but when I click on the products the page is blank and there is no reaction. Where did I go wrong?
I use React-router version 6.

And I also get an error:

history.ts:487 Matched leaf route at location "/products" does not have an element or Component. 
This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

App.js

import React, { Component } from "react";
import { Route, Routes } from "react-router-dom";
import NavBar from "./components/navbar";
import Products from "./components/products";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className="content">
          <Routes>       
            <Route
              path="/products"
              render={(props) => <Products sortBy="newest" {...props} />}
            />         
          </Routes>
        </div>
      </div>
    );
  }
}

export default App;

Products.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";
class Products extends Component {
  state = {
    products: [
      { id: 1, name: "Product 1" },
      { id: 2, name: "Product 2" },
      { id: 3, name: "Product 3" },
    ],
  };

  render() {
    return (
      <div>
        <h1>Products</h1>
        <ul>
          {this.state.products.map((product) => (
            <li key={product.id}>
              <Link to={`/products/${product.id}`}>{product.name}</Link>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default Products;

>Solution :

instead of putting a callback in render just put your component like this :

    render={<Products sortBy="newest"/>}

If that doesn’t work you can try this too :

<Route
          path="/products"
          element={<Products sortBy="newest"/>}
/>