How to use the react-hot-loader.areComponentsEqual function in react-hot-loader

React.Children.forEach(this.props.children, (child: ReactElement) => {
            if (areComponentsEqual(child.type as React.ComponentType, ChartRow)) {
                const chartRow = child;
                const rowKey = `chart-row-row-${i}`;
                const firstRow = i === 0;
                const isVisible = child.props.visible;
                const props: ChartRowProps = {
                    timeScale,
                    paddingLeft,
                    paddingRight,
                    leftAxisWidths,
                    rightAxisWidths,
                    width: this.props.width,
                    minTime: this.props.minTime,
                    maxTime: this.props.maxTime,
                    transition: this.props.transition,
                    enablePanZoom: this.props.enablePanZoom,
                    minDuration: this.props.minDuration,

React.Children.forEach(props.children, (child) => {
      const c = child as React.ReactElement
      const type = c.type as React.ComponentClass
      if (areComponentsEqual(type, SourceTable)) {
        sourceTable = c
      } else if (areComponentsEqual(type, SqlEditor)) {
        sqlEditor = c
      } else if (areComponentsEqual(type, SqlPreview)) {
        const { previewHeight } = state
        sqlPreview = React.cloneElement(c, { height: previewHeight })
      } else if (areComponentsEqual(type, EditorBottom)) {
        editorBottom = c
      } else if (areComponentsEqual(type, ViewVariableList)) {
        viewVariableList = React.cloneElement(c, {
          className: Styles.viewVariable,
          onAdd: this.addVariable,
          onDelete: this.deleteVariable,
          onEdit: this.editVariable
        })
      } else if (areComponentsEqual(type, VariableModal)) {

React.Children.forEach(props.children, (child) => {
      const c = child as React.ReactElement
      const type = c.type as React.ComponentClass
      if (areComponentsEqual(type, SourceTable)) {
        sourceTable = c
      } else if (areComponentsEqual(type, SqlEditor)) {
        sqlEditor = c
      } else if (areComponentsEqual(type, SqlPreview)) {
        const { previewHeight } = state
        sqlPreview = React.cloneElement(c, { height: previewHeight })
      } else if (areComponentsEqual(type, EditorBottom)) {
        editorBottom = c
      } else if (areComponentsEqual(type, ViewVariableList)) {
        viewVariableList = React.cloneElement(c, {
          className: Styles.viewVariable,
          onAdd: this.addVariable,
          onDelete: this.deleteVariable,
          onEdit: this.editVariable
        })
      } else if (areComponentsEqual(type, VariableModal)) {
        const { variableModalVisible, editingVariable } = this.state
        variableModal = React.cloneElement(c, {
          visible: variableModalVisible,
          variable: editingVariable,

{React.Children.map(this.props.children, child => {
          const childElement = child as React.ReactElement;
          if (
            areComponentsEqual(
              childElement.type as React.ComponentType,
              Icon
            ) ||
            areComponentsEqual(
              childElement.type as React.ComponentType,
              Name
            ) ||
            areComponentsEqual(
              childElement.type as React.ComponentType,
              LastSaved
            )
          ) {
            return React.cloneElement(childElement, {
              className:
                typeof childElement.props.className === "string" &&
                childElement.props.className !== ""
                  ? `${childElement.props.className} directory-entry-field`
                  : "directory-entry-field"
            });
          } else {

sourceTable = c
      } else if (areComponentsEqual(type, SqlEditor)) {
        sqlEditor = c
      } else if (areComponentsEqual(type, SqlPreview)) {
        const { previewHeight } = state
        sqlPreview = React.cloneElement(c, { height: previewHeight })
      } else if (areComponentsEqual(type, EditorBottom)) {
        editorBottom = c
      } else if (areComponentsEqual(type, ViewVariableList)) {
        viewVariableList = React.cloneElement(c, {
          className: Styles.viewVariable,
          onAdd: this.addVariable,
          onDelete: this.deleteVariable,
          onEdit: this.editVariable
        })
      } else if (areComponentsEqual(type, VariableModal)) {
        const { variableModalVisible, editingVariable } = this.state
        variableModal = React.cloneElement(c, {
          visible: variableModalVisible,
          variable: editingVariable,
          nameValidator: this.variableNameValidate,
          onCancel: this.closeVariableModal,
          onSave: this.saveVariable
        })
      }
    })

React.Children.forEach(childRow.props.children, function (child) {
                    if (child === null)
                        return;
                    if (react_hot_loader_1.areComponentsEqual(child.type, Charts_1.Charts)) {
                        countCharts_1 += 1;
                        align_1 = "right";
                    }
                    else if (!react_hot_loader_1.areComponentsEqual(child.type, Brush_1.Brush) &&
                        !react_hot_loader_1.areComponentsEqual(child.type, MultiBrush_1.MultiBrush)) {
                        if (align_1 === "left") {
                            countLeft_1 += 1;
                        }
                    }
                });
                if (countCharts_1 !== 1) {

React.Children.forEach(props.children, (child) => {
      const c = child as React.ReactElement
      const type = c.type as React.ComponentClass
      if (areComponentsEqual(type, SourceTable)) {
        sourceTable = c
      } else if (areComponentsEqual(type, SqlEditor)) {
        sqlEditor = c
      } else if (areComponentsEqual(type, SqlPreview)) {
        const { previewHeight } = state
        sqlPreview = React.cloneElement(c, { height: previewHeight })
      } else if (areComponentsEqual(type, EditorBottom)) {
        editorBottom = c
      } else if (areComponentsEqual(type, ViewVariableList)) {
        viewVariableList = React.cloneElement(c, {
          className: Styles.viewVariable,
          onAdd: this.addVariable,
          onDelete: this.deleteVariable,
          onEdit: this.editVariable
        })
      } else if (areComponentsEqual(type, VariableModal)) {
        const { variableModalVisible, editingVariable } = this.state
        variableModal = React.cloneElement(c, {

{React.Children.map(this.props.children, child => {
          const childElement = child as React.ReactElement;
          if (
            areComponentsEqual(
              childElement.type as React.ComponentType,
              Icon
            ) ||
            areComponentsEqual(
              childElement.type as React.ComponentType,
              Name
            ) ||
            areComponentsEqual(
              childElement.type as React.ComponentType,
              LastSaved
            )
          ) {
            return React.cloneElement(childElement, {
              className:
                typeof childElement.props.className === "string" &&
                childElement.props.className !== ""
                  ? `${childElement.props.className} directory-entry-field`
                  : "directory-entry-field"
            });
          } else {
            return {child};
          }
        })}

React.Children.forEach(childRow.props.children, function (child) {
                    if (child === null)
                        return;
                    if (react_hot_loader_1.areComponentsEqual(child.type, Charts_1.Charts) ||
                        react_hot_loader_1.areComponentsEqual(child.type, Brush_1.Brush) ||
                        react_hot_loader_1.areComponentsEqual(child.type, MultiBrush_1.MultiBrush)) {
                        if (react_hot_loader_1.areComponentsEqual(child.type, Charts_1.Charts)) {
                            align_1 = "right";
                            pos_1 = 0;
                        }
                    }
                    else {
                        var width = Number(child.props.width) || 40;
                        var visible = !_.has(child.props, "visible") || child.props.visible;
                        if (!visible)
                            width = 0;
                        if (align_1 === "left") {
                            leftAxisWidths[pos_1] = leftAxisWidths[pos_1]
                                ? Math.max(width, leftAxisWidths[pos_1])
                                : width;
                            pos_1 -= 1;
                        }

React.Children.forEach(childRow.props.children, function (child) {
                    if (child === null)
                        return;
                    if (react_hot_loader_1.areComponentsEqual(child.type, Charts_1.Charts) ||
                        react_hot_loader_1.areComponentsEqual(child.type, Brush_1.Brush) ||
                        react_hot_loader_1.areComponentsEqual(child.type, MultiBrush_1.MultiBrush)) {
                        if (react_hot_loader_1.areComponentsEqual(child.type, Charts_1.Charts)) {
                            align_1 = "right";
                            pos_1 = 0;
                        }
                    }
                    else {
                        var width = Number(child.props.width) || 40;
                        var visible = !_.has(child.props, "visible") || child.props.visible;
                        if (!visible)
                            width = 0;
                        if (align_1 === "left") {
                            leftAxisWidths[pos_1] = leftAxisWidths[pos_1]
                                ? Math.max(width, leftAxisWidths[pos_1])
                                : width;
                            pos_1 -= 1;