I have this component that shows list of education items added by the user where each time represents where he studied and for how long...etc:

class EducationItems extends Component {
  render() {
    const education = !!this.props.profile ? this.props.profile.education : [];
    return (
      <div>
        {!!education &&
          education.map((education_element_data, i) => {
            console.log(
              "🚀 ~ file: EducationItems.js ~ line 26 ~ EducationItems ~ education.map ~ i",
              i
            );
            return (
              <EducationItem
                number={i}
                educationElementData={education_element_data}
              />
            );
          })}
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  profile: state.profile.profile,
});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(EducationItems);

It is connected to the profile value in the store as you can see:

const mapStateToProps = (state) => ({
  profile: state.profile.profile,
});

When the user adds education, I get the new list of all education(s) he added and I try to updated in the UI. So in the reducer I have this:

profileReducer.js

const initialState = {
  profile: null,
};

   case ADD_EDUCATION:
      let updated_profile_with_new_education = state.profile;
      updated_profile_with_new_education.education =
        action.payload.updated_education;
     
      return {
        ...state,
        profile: updated_profile_with_new_education,
      };

The problem after the user adds an education successfully, the EducationItems component does not get rerendered.

It seems that it is not detecting the change in store.state.profile.education for some reason.

I thought that updating anything in store.state.profile would get it rerendered since it is connected to that value in the store.

Any idea what's going on?