How to use useParams inside a useEffect?

I want to use useParams inside of useEffect but I am getting error saying that "Uncaught TypeError: Cannot read properties of undefined (reading 'params')".

app.js

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

ProductDetails.js

const dispatch = useDispatch();
const { id } = useParams();

  useEffect(() => {
    dispatch(getProductDetails(match.params.id));
  }, [dispatch, match.params.id]);`

It is giving me error as I have mentioned above.