My backend works perfectly fine, even my redux integration with react js work completely fine but as soon as i use useEffect it gives an error of "Cannot read properties of undefined"

Below is my code:

const ProductListScreen = ({ match }) => {
  const dispatch = useDispatch()

  const shopDetails = useSelector((state) => state.shopDetails)
  const { loading, error, shop } = shopDetails

  useEffect(() => {
    dispatch(shopDetail(match.params.shopid))
  }, [dispatch, match])

  if (loading) {
    return (
      <div className='loader'>
        <Loader />
      </div>
    )
  }

  return (
    <>
      <Link className='btn btn-dark my-3' to='/'>
        Go Back
      </Link>
      <h3>{shop.name} Products</h3>
      {error ? (
        <Message variant='warning' color='red'>
          {error}
        </Message>
      ) : (
        <Row>
          {shop &&
            shop.products.map((product) => (
              <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} shopId={shop._id} />
              </Col>
            ))}
        </Row>
      )}
    </>
  )
}