Codemirror gutter ignoring line breaking after rerendering

Infos: I´m using typescript with the newest react version and manually integrated codemirror instances.

I think it all used to work fine, I´m not quiet sure, but now my codemirror seems to do weird stuff.
So the initial render of my codemirror window seems to look fine at first:

Problem is, the end of the text content does not align with the line of code from the gutter at some point:

There also seem to be weird behaviours when scrolling - sometimes, when one line is marked, it also marks the gutter element right next to it, as it should be, but after scrolling down and up once again, without selecting anything, the gutter element is unselected all of the sudden.

Now I can click on the issues in the issuelist at the left, which will cause my editorview to rerender by using the “setState” method and creating a completely new state and the same stuff starts to appear again - just worse. It seems like the linewrapping now gets ignored completely.
In one word: it´s weird.

Let me show you my code:

This is the creation of my codemirror instance:

// this component is used to display a codeeditor using codemirror
const CodemirrorEditor = ({ currentScanResult, setEditorRef }: InputProps) => {
  useEffect(() => {
    // this is the code that is used to display the codeeditor
    let view = new EditorView({
      state: createCodemirrorState(currentScanResult.contractCode),
      parent: document.getElementById('contract-code')!
    });
    setEditorRef(view);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <div
      id="contract-code"
      className="h-[35rem] overflow-y-scroll font-cygnito"
    />
  );
};

Now I have this method, to create a new codemirror state, that I´m always calling when rendering, which looks as follows:
import { EditorState } from ‘@codemirror/state’;
import { EditorView } from ‘@codemirror/view’;
//import { solidity } from ‘@replit/codemirror-lang-solidity’;
import { basicSetup } from ‘codemirror’;
import { EditorThemeExtension } from ‘./codemirrorCss’;

export const createCodemirrorState = (code: string) => {
  const state = EditorState.create({
    doc: code
      .replace(/\\n/g, ' \n')
      .replace(/\\"\\"/g, '".."')
      .slice(1, -1), // NOTE: the contractCode is returned as a string which can´t display escaped newlines and double quotes
    // therefore you have to manually reset the linebreaks and double quotes -> ATTENTION: to keep the original length of the code, you
    // have to add a space before the linebreak and a ".." between the double quotes, so the issuepositions are still correct
    extensions: [
      basicSetup,
      EditorView.editable.of(false),
      EditorView.lineWrapping,
      EditorThemeExtension
      //solidity
    ]
  });
  return state;
};

And this is the CSS, that I´m using:

import { Extension } from '@codemirror/state';
import { EditorView } from '@codemirror/view';

const EditorThemeCss = EditorView.theme({
  '.cm-content': {
    fontFamily: 'Libertad',
    fontSize: '10px',
    padding: '4px 0px'
  },
  '.cm-gutters': {
    borderWidth: '0px',
    backgroundColor: 'white',
    fontFamily: 'Libertad',
    fontSize: '10px',
    marginTop: '4px'
  },
  '.cm-gutterElement': {
    marginTop: '0px !important' // NOTE: this is necessary to prevent the gutter from being
    //displayed below the line numbers, because codemirror seems to inconsistently add margins on the first gutterElement or not,
    // which is why you have to reset the margin here and add it to the div (cm-gutters) above, which contains all the gutterElements
  },
  '.cm-foldGutter span': {
    display: 'none'
  },
  '.cm-activeLine': {
    backgroundColor: '#b7baff'
  },
  '.cm-activeLine *': {
    color: 'white',
    borderRadius: '0.5rem'
  },
  '.cm-activeLineGutter': {
    backgroundColor: '#b7baff',
    color: 'white',
    borderTopLeftRadius: '0.5rem',
    borderBottomLeftRadius: '0.5rem'
  },
  '@media (min-width: 768px)': {
    '.cm-content': {
      fontSize: '15px'
    },
    '.cm-gutters': {
      fontSize: '15px'
    }
  }
});
export const EditorThemeExtension: Extension = [EditorThemeCss];

Maybe you can spot something “wrong” in my code?

Glad for any help I can get!

Just solved it, it was this css class in my code, which caused the gutters to not be as high as the code lines themself:

  '.cm-gutterElement': {
    marginTop: '0px !important' // NOTE: this is necessary to prevent the gutter from being
    //displayed below the line numbers, because codemirror seems to inconsistently add margins on the first gutterElement or not,
    // which is why you have to reset the margin here and add it to the div (cm-gutters) above, which contains all the gutterElements
  },