Lines disalign between different files

[JerryLu991223]

Currently, I find that the split line between origin code and current is not stable. I have adjusted the style for "line", but it still misaligned.

Here is my code:

import React from "react"
import ReactDiffViewer, { DiffMethod, ReactDiffViewerStylesOverride } from "react-diff-viewer"

interface IProps {
  filePath?: string
  oldValue?: string
  newValue?: string
  leftTitle?: string
  rightTitle?: string
  splitView?: boolean
  loading?: boolean
}

const styles = {
  line: {
    wordBreak: 'break-word',
    whiteSpace: "normal"
  },
  diffContainer: {
    borderRadius: '8px',
    border: '1px solid #e8e8e8',
  },
  gutter: {
    width: '2.5%'
  }
}

const DiffViewer: React.FC<IProps> = ({ filePath, oldValue, newValue, rightTitle, loading, splitView = true }) => {
  // const highlightSyntax = (str) => (
  //   <pre
  //     style={{ display: "inline" }}
  //     class="foo"
  //     dangerouslySetInnerHTML={{
  //       // __html: Prism.highlight(str, Prism.languages.javascript)
  //       __html: Prism.highlight(str, Prism.languages.json, "json")
  //       // __html: str
  //     }}
  //   />
  // );

  return (
    <div >
      {loading && (
          <CubeSpin />
        ) || <ReactDiffViewer
          oldValue={oldValue?.toString()}
          newValue={newValue?.toString()}
          splitView={splitView}
          compareMethod={DiffMethod.WORDS}
          leftTitle={filePath}
          rightTitle={rightTitle}
          styles={styles as ReactDiffViewerStylesOverride}
          // renderContent={highlightSyntax}
        />}
    </div>
  );
}

export default DiffViewer;