React-Grid-Layout: How to change ResponsiveReactGridLayout's cols programatically?

Question

I'm using ResponsiveReactGridLayout and I want to change it's cols programatically. When I upload an image, I want my ResponsiveReactGridLayout'cols is changed base on the image size. I tried below and got error:

Unhandled Runtime Error Error: ResponsiveReactGridLayout: cols entry for breakpoint lg is missing!

Is there other way to do that. Thank you for your helping guys

constructor(props) {
    super(props);
    
    
    this.state = {
      cols: { lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 },
      rowHeight: 100,
      // rows: 3,
      // cols: 12,
      items: _.range(0, 36).map(function (i, key, list) {
        return {
          i: i.toString(),
          x: i % 12,
          y: Math.floor(i / 12),
          w: 1,
          h: 1,
          initCell: true,
          draggable: false,
          static: true,
          isBounded: true,
        };
      }),
      newCounter: 0,
      dimensions: { height: 0, width: 0 },
    };
    
    this.onImgLoad = this.onImgLoad.bind(this);
    
    this.onAddItem = this.onAddItem.bind(this);
    this.onBreakpointChange = this.onBreakpointChange.bind(this);
    
  }


onImgLoad({ target: img }) {
    let numCols = Math.round(img.offsetWidth / 100);
    let numRows = Math.round(img.offsetHeight / 100);
    console.log(numCols + ' ' + numRows);
    this.setState({
      cols: { lg: numCols, md: numCols, sm: numCols, xs: numCols, xxs: numCols },
      rowHeight: 100,
      items:_.range(0, numCols * numRows).map(function (i, key, list) {
        return {
          i: i.toString(),
          x: i % numCols,
          y: Math.floor(i / numCols),
          w: 1,
          h: 1,
          initCell: true,
          draggable: false,
          static: true,
          isBounded: true,
        };
      }),
      cols: { lg: numCols, md: numCols, sm: numCols, xs: numCols, xxs: numCols },
      dimensions: { height: img.offsetHeight, width: img.offsetWidth },
      newCounter: 0,
    });
    console.log(img.offsetHeight + " " + img.offsetWidth);
}



<img onLoad={this.onImgLoad} src={src} />
<ResponsiveReactGridLayout
            {...this.props}
              onLayoutChange={this.onLayoutChange}
              onBreakpointChange={this.onBreakpointChange}
              onDrop={this.onDrop}
              measureBeforeMount={false}
              useCSSTransforms={this.state.mounted}
              cols={this.state.cols}
// rowHeight={this.state.rowHeight}
              compactType={null}
              isResizable={false}
              // preventCollision={true}
              allowOverlap={true}
              isDroppable={true}
              isBounded={true}
              margin={[0, 0]}
              style={{
                backgroundImage: "url(" + src + ")",
                backgroundPosition: "center",
                backgroundSize: "100% 100%",
                backgroundRepeat: "no-repeat",
              }}>
</ResponsiveReactGridLayout>

Click this link to see error Error Image