React-redux dispatch is undefined when rendered inside specific component

For some reason, when i render InventoryItem component inside InventoryPage component, dispatch is returned as undefined, but when i render it inside any other component it works perfectly.

Here's InventoryItem:

// REDUX
import { connect } from 'react-redux';
import { addItem } from '../../../Redux/reducers/cart/actions/cartActions.js';
// REUSABLE COMPONENTS
import { Button } from '../button/button.jsx';

export const InventoryItem = ({ drilledProps, dispatch }) => {

  const { name, price, imageUrl } = drilledProps;

  return (
    <div className="collection-item">
      <div
        className="image"
        style={{
          background: `url(${imageUrl})`
        }}
      />
      <div className="collection-footer">
        <span className="name">{name}</span>
        <span className="price">${price}</span>
      </div>
      <Button
        handler={() => dispatch(addItem(drilledProps))}
        modifier="_inverted"
        type="button"
        text="ADD TO CART"
      />
    </div>
  );
};

export default connect(null)(InventoryItem);

When i render it here, dispatch returns undefined:

// REDUX
import { connect } from 'react-redux';
import { categorySelector } from '../../../../Redux/reducers/inventory/selectors/inventorySelectors.js';

// COMPONENTS
import { InventoryItem } from '../../../reusable-components/inventory-item/inventory-item.jsx';

const InventoryPage = ({ reduxProps: { categoryProps } }) => {

  const { title: category, items } = categoryProps;

  return (
    <div className="collection-page">
      <h2 className="title">{category}</h2>
      <div className="items">
        {
          items.map((item) => (
            <InventoryItem key={item.id} drilledProps={item}/>
          ))
        }
      </div>
    </div>
  );
};

const mapStoreToProps = (currentStore, ownProps) => ({
  reduxProps: {
    categoryProps: categorySelector(ownProps.match.params.categoryId)(currentStore)
  }
});

export default connect(mapStoreToProps)(InventoryPage);

When i render it here it works perfectly:

// COMPONENTS
import InventoryItem from '../../../../reusable-components/inventory-item/inventory-item.jsx';

export const InventoryPreview = ({ title, items }) => {
  
  return (
    <div className="collection-preview">
      <h1 className="title">{title}</h1>
      <div className="preview">
        {items
          .filter((item, index) => index < 4)
          .map((item) => (
            <InventoryItem key={item.id} drilledProps={item} />
          ))}
      </div>
    </div>
  );
};

Thanks for the help in advance!