How to use the react-diff-view.getChangeKey function in react-diff-view

export const getDiffAnchors = (diff: DiffInfo): string[] => {
  const anchors: string[] = [];

  for (const hunk of diff.hunks) {
    let seekingChange = true;
    for (const change of hunk.changes) {
      if (change.type === 'normal') {
        seekingChange = true;
      } else if (seekingChange) {
        // This is the first change in a block.
        anchors.push(getChangeKey(change));
        seekingChange = false;
      }
    }
  }
  return anchors;
};

getWidgets = (
    hunks: Hunks,
    selectedMessageMap: LinterProviderInfo['selectedMessageMap'],
  ) => {
    const { _changeCanBeCommentedUpon, enableCommenting, version } = this.props;

    const allWidgets: WidgetMap = {};

    // We only want widgets for delete, insert and normal changes, not eofnl changes.
    const changesAllowingWidgets = getAllHunkChanges(hunks).filter(
      (change) => change.isDelete || change.isInsert || change.isNormal,
    );
    for (const change of changesAllowingWidgets) {
      const changeKey = getChangeKey(change);
      const line = change.lineNumber;

      let messages;
      if (line && selectedMessageMap) {
        messages = selectedMessageMap.byLine[line];
      }

      let widget =
        enableCommenting && line && _changeCanBeCommentedUpon(change) ? (
          
            {(allComments) => allComments}

selectChange(change) {
        const {selectedChanges} = this.state;
        const key = getChangeKey(change);
        this.setState({selectedChanges: union(selectedChanges, [key])});
    }

getCodeLineAnchor(line: number) {
    const lineChanges = this.changeMap[line];
    if (!lineChanges || lineChanges.length === 0) {
      log.warn(`No changes were mapped for line ${line}`);
      return '';
    }

    return `#${getChangeKey(lineChanges[0])}`;
  }
}

getCodeLineAnchor(line: number) {
    const lineChanges = this.changeMap[line];
    if (!lineChanges || lineChanges.length === 0) {
      log.warn(`No changes were mapped for line ${line}`);
      return '';
    }

    return `#${getChangeKey(lineChanges[0])}`;
  }
}

const renderWidget = (hunks: Hunks, widgets: WidgetMap, line: number) => {
    const result = getAllHunkChanges(hunks).filter(
      (change) => change.lineNumber === line,
    );
    if (result.length !== 1) {
      throw new Error(`Could not find a change at line ${line}`);
    }

    const key = getChangeKey(result[0]);
    return shallow(<div>{widgets[key]}</div>);
  };

generateAnchorID(change) {
                return idPrefix + '-' + getChangeKey(change);
            }
        };

addComment(change) {
        const {writingChanges} = this.state;
        const key = getChangeKey(change);

        if (!writingChanges.includes(key)) {
            this.setState({writingChanges: [...writingChanges, key]});
        }
    }