I'm trying to follow a tutorial but when I have to pass the props I get this error

TypeError: undefined has no properties PokemonDetails.js:16

I was trying to do a console.log but I'm unable I don't know what is wrong.

const PokemonCard = (props) => {
  const classes = useStyles();
  const { pokemon, image } = props;
  const { id, name } = pokemon;
  return (
    <Grid item xs={12} sm={2} key={id}>
      <Link to={"/pokemon/" + id} className={classes.link}>
          <Link to={"/pokemon/" + id}>
        <Card className={classes.card}>
          <CardMedia className={classes.cardMedia} image={image}></CardMedia>
          <CardContent className={classes.cardContent}>
            <Typography>{name}</Typography>
          </CardContent>
        </Card>
          
          </Link>
      </Link>
    </Grid>
  );
}

export default class PokemonDetails extends Component {

  constructor(props){
    super(props)
    this.state = {
      pokemon: null
    }
  }
  
  componentDidMount(){
    const { match } = this.props
    const { id } = match?.params // error
    axios.get(POKEMON_API_URL + "/" + id).then((response) => {
      if (response.status >= 200 && response.status < 300) {
        console.log(response.data);
        this.setState({ pokemon: response.data })
      }
    })
  }
  render() {
    return (
      <div style={{marginTop: 100}}>PokemonDetails</div>
    )
  }
}