Why does rendering products of one category overwrite all products?

Question

React

Good afternoon, I made such a conclusion of the catalog page
Category output

import React,{Component} from 'react'
import {connect} from 'react-redux'
import Aside from "../aside/Aside";
import {fetchCategories} from "../../redux/actions/categoriesAction";
import CatalogItem from "./CatalogItem";

class Catalog extends Component {

  renderCategories(){
    const categories = this.props.categories
      return categories.map((category, index) => {
        return(
          <div key={index}  className="catalog-point">
            <div className="title">
              <h2>{category.name}</h2>
            </div>
            <div className="catalog-filters">
              <span>Сортировка:</span>
              <ul>
                <li>
                  <span>Цена</span>
                  <img
                    src="http://delivery.bamboobar.su/wp-content/themes/bamboobar/static/img/assets/catalog/down.svg"
                    alt="Down" />
                </li>
              </ul>
            </div>
            <div className="catalog-items">
              <CatalogItem  categoryId={category._id}/>
            </div>
          </div>
        )
    })
  }

  componentDidMount() {
    this.props.fetchCategories()
  }

  render() {
    return(
      <section className="catalog">
        <div className="content">
          <div className="catalog-wrapper">
            <div className="catalog-main">
              {
                this.props.loading  && this.props.categories !== 0
                ? "<h1> loading </h1>"
                : <ul>
                  {this.renderCategories()}
                  </ul>
              }
            </div>
            <Aside/>
          </div>
        </div>
      </section>
    )
  }
}
const mapStateToProps = (state) =>{
  return{
    categories: state.categoriesReducer.categories,
    loading: state.categoriesReducer.loading,
  }
}

const mapDispatchToProps = (dispatch) => {
  return{
    fetchCategories: () => dispatch(fetchCategories()),
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Catalog)

The catalogItem file outputs one product, as you can see we are passing the category id

import React,{Component} from "react"
import {connect} from "react-redux";
import {fetchProductsById} from "../../redux/actions/productsAction";

class CatalogItem extends Component{
  componentDidMount(){
    this.props.fetchProductsById(this.props.categoryId)
  }

  renderProducts(){
    const products = this.props.products
    return products.map((product, key) => {
      let productImage = product.productImage
      productImage = "http://localhost:5000/" + productImage

      return(
        <div className="catalog-item" key={key} data-id={product._id}  >
          <div className="catalog-item__top">
            <h4>{product.name}</h4>
            <span><span className="woocommerce-Price-amount amount"><bdi>{product.price}<span
              className="woocommerce-Price-currencySymbol">₽</span></bdi></span></span>
          </div>
          <div className="catalog-item__info">
            <p></p>
          </div>
          <div className="catalog-item__photo">
            <img src={productImage} />
            <div className="catalog-photo__general">
              <div className="catalog-photo__gramme"><span>{product.weight} г</span>
              </div>
            </div>
          </div>
          <div className="lds-ripple">
            <div></div>
            <div></div>
          </div>
        </div>
      )
    })
  }



  render() {
    return(
      <React.Fragment>
        {
          this.props.loading  && this.props.products !== 0
            ? "<h1> loading </h1>"
            : <React.Fragment>
              {this.renderProducts()}
            </React.Fragment>
        }
      </React.Fragment>
    )
  }
}


const mapStateToProps = (state) =>{
  return{
    products: state.productsReducer.products,
    loading: state.productsReducer.loading
  }
}

const mapDispatchToProps = (dispatch) => {
  return{
    fetchProductsById: (id) => dispatch(fetchProductsById(id))
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(CatalogItem)

And for what at the end on all categories the products of only the last category are deduced. And it is necessary that each category displays its own