Object Assign with nested state

class MyComponent extends Component {

  constructor(props) {
    super();

    this.state = {
      _data: {
        must_known: [],
        libs: [],
        tools: [],
        softwares: []
      }
    } 
  }

  componentDidMount() {
    const { must_known , libs , tools , softwares } = this.state._data;
    const _must_known_data = [
      {
        title: 'Html',
        progress: 98,
        icon_url: images.html_icon,
        chart_data: {},
      },
      {
        title: 'Css',
        progress: 96,
        icon_url: images.css_icon,
        chart_data: {},
      },
      {
        title: 'Js, ES6, 7',
        progress: 78,
        icon_url: images.js_icon,
        chart_data: {},
      }
    ]
    
    this.setState(
      Object.assign(
        {},
        this.state,
        {
          charts_data: 
            Object.assign(
              {},
              this.state._data,
              {
                // these two commented lines will take shallow copy , even with Object.assign()
                // must_known: Object.assign([], _must_known_data),
                // libs: Object.assign([], _must_known_data)
                
                //solution for that is Json.parse
                // also the pitfall for this is if you have some function in your object it will be skipped
                must_known: JSON.parse(JSON.stringify(_must_known_data)),
                libs: JSON.parse(JSON.stringify(_must_known_data))
              }
            )
        }
      )
    )
  }

  render() {
    // here you will get brand new array or object based on that part of state that you need
    const { must_known, libs } = this.state._data
    console.log('THIS IS MUSTKNOWN' + JSON.stringify(must_known , null , 2));
    console.log('THIS IS LIBS: ' +  JSON.stringify(libs , null , 2));
    

    return(
      ...
    )
  }
}

export default MyComponent;