Can't fetch data from API , using product:id ( React )

With react router v5 everything working, but with v6 have issue.

App.js

 <Route path="/product/:id/" element={<ProductCars/>} />

ProductActions.js

export const listProductDetails = (id) => async (dispatch) => {
  try {
      dispatch({ type:PRODUCT_DETAILS_REQUEST })

      const { data } = await axios.get(`/api/products/${id}`)

      dispatch({
          type: PRODUCT_DETAILS_SUCCESS,
          payload: data
      })

  } catch (error) {
      dispatch({
          type: PRODUCT_DETAILS_FAIL,
          payload: error.response && error.response.data.detail
              ? error.response.data.detail
              : error.message,
      })
  }
}

This is working

//import axios from "axios";
//import products from "../products";

function ProductCars() {
    const { id } = useParams();
    const product = products.find((p) => p._id === (id));

  useEffect (() =>{

  async function fetchProduct() {
  const{data} = await axios.get(`/api/products`)

  }

  })

When i try update code to react router v6 ( removed match and match.params.id ) cant fetch data.

ProductCars.js

import ...{}

const ProductCars = () => {
  const dispatch = useDispatch();
  const { id } = useParams();
  const productDetails = useSelector((state) => state.productDetails);
  const { loading, error, product } = productDetails;
  
   console.log(id);


  useEffect(() => {
    if (product && id !== product._id) {
      dispatch(listProductDetails(id));
      console.log(id); // proper id 
    }
 console.log(product.price) // undefined
  }, [dispatch,id,product]);

return (
<div>
 <h6> test  {product.id}</h6>
 <h6> test  {product.name}</h6>
<h6> test  {product.rating}</h6>
<div>
  );
}

Redux show Internal Server error 500 , but on the HomePage works properly. Added products from db shows on HomePage. I guess I cant connect to database , but why ?