[Redux] I can't access nested object from mapStateToProps

Hello guys!
Why can’t I access nested properties inside item object from Redux store?
I am rendering stuff like id, productCode successfuly.

It looks like it’s rendering non-existent props before it fetch the data (axios get)
Can someone explain how to fix this?
Link to branch here
Thank you,
Kuba :wink:

SCREENSHOT

import React, { Component } from "react";
import { fetchProductByID } from "../../actions/productActions";
import { connect } from "react-redux";
class Details extends Component {
  componentDidMount() {
    this.props.dispatch(fetchProductByID(this.props.id));
  }

  render() {
     return (
      <div>
        <h1>Welcome To Details</h1>
        {this.props.item.name}
        {this.props.item.productCode}
        {/* LINE BELOW RETURNS ERROR */}
        {this.props.item.brand.name} 
      </div>
    );
  }
}

const mapStateToProps = state => ({
  products: state.products.items,
  loading: state.products.loading,
  error: state.products.error,
  item: state.products.item,
  id: state.products.id
});

export default connect(mapStateToProps)(Details);