reactjs - Nuka Carousel not displaying in react slideHeight props 0

Question

I am using nuka carousel in react TypeScript a saleor pwa react ts app
Nuka carousel not showing items cause nuka is passing slideHeight 0 to slider -frame
Code Example:

render() {
    const { title } = this.props;
    const { products } = this.state;
    const productsList = products.map((product: any) => (
      <Link to={'/product/' + product.id} key={product.id}>
          <ProductListItem product={product} />
      </Link>
    ))

    return (
      <div className="products">
        <div className="container">
          <h3>{title}</h3>
          <Carousel>
            {productsList}
          </Carousel>
        </div>
      </div >
    )
  }

Answer 1

I solve it by just add if (products.length)
Solution:

render() {
    const { title } = this.props;
    const { products } = this.state;
    if (products.length) {
      const productsList = products.map((product: any) => (
        <Link
          to={'/product/' + product.id} key={product.id}
        >
          <ProductListItem product={product} />
        </Link>
      ))

      return (
        <div className="products">
          <div className="container">
            <h3>{title}</h3>
            <Carousel>
              {productsList}
            </Carousel>
          </div>
        </div >
      )
    }
    return null;
  }

There is no need to override css this is proper way

Here is solution Via Override css. this is for those who is interested in css override