score:1

Accepted answer
import { useNavigate } from 'react-router-dom';

const ProductCard = ({ props,product, ...rest }) => {
const navigate = useNavigate();  // <-- MOVE HERE
return (
    <Card
  
    sx={{
      display: 'flex',
      flexDirection: 'column',
      height: '100%'
    }}
    {...rest}
  >
    <CardActionArea onClick={event => {navigate('app/service/'+product.serviceID)}}>
    
    <CardContent> ...

score:1

import { useNavigate } from 'react-router-dom';

const ProductCard = ({ props,product, ...rest }) => { //<-- curly brackets
   const navigate = useNavigate(); //<-- call useNavigate

   return ( //<-- html inside return
      <Card
  
    sx={{
      display: 'flex',
      flexDirection: 'column',
      height: '100%'
    }}
    {...rest}
  >
    <CardActionArea onClick={event => {navigate('app/service/'+product.serviceID)}}>
    
    <CardContent> ...
   );
}

Related Query

More Query from same tag