I'm receiving a cannot read props of undefined. I'm trying to destructure props but I need the hook calls. Is there a way for me to destructure props in a function or another way to resolve this issue?

ProductBrowse.jsx is formatting the products:

```
    const ProductBrowse = () => {

    const { id, name, img, store, price, desc, inCart } = this.props.product;
    const [open, setOpen] = React.useState(false);

    const openModal = () => {
      setOpen(!open);
    };

    const closeModal = () => {
      setOpen(!open);
    };

    return (
      <Box border={1} borderRadius={3}>
        <Card>
          <CardActionArea>
             <ProductModal
              open={open}
              onClick={() => openModal()}
              onClose={() => closeModal()}
              onSave={() => closeModal()}
              productName={name}
              productDesc={desc}
            />
            <CardHeader
              title={name}
              subheader={formatCurrency(price)}
            />
            <CardMedia
              image={img}
              alt={desc}
            />
            <CardContent>
              <Typography variant='body2' color='textSecondary' component='p'>
                {desc}
              </Typography>
            </CardContent>
          </CardActionArea>
          <CardActions>
            <Button size='small' /*To Checkout*/>BUY NOW</Button>
            <Button
              size='small'
              onClick={() => {
                console.log('Added to Cart');
              }}
            >
              ADD TO CART
            </Button>
            <Button size='small'>REVIEW</Button>
          </CardActions>
        </Card>
      </Box>
    );
  }

```