Unable to get product from the slug

TypeError: Cannot destructure property ‘slug’ of ‘query’ as it is undefined.

import { useRouter } from "next/router";
import React from "react";
import Layout from "../../components/Layout";
import { data } from "../../utils/data";
 const ProductScreen = () => {
  const { query } = useRouter;
  const { slug } = query;
  const product = data.products.find((x) => x.slug === slug);
  if (!product) {
    return <div>Product Not Found</div>;
  }
  return (
    <Layout title={product.name}>
      <h1>{product.name}</h1>
    </Layout>
  );
};
 export default ProductScreen;