Im trying to embed Monaco editor into my react code.

For that purpose, Im using https://www.npmjs.com/package/@monaco-editor/react#installation

Based on the sandbox that the package provides, you can see how lines numbered on the left side matches with the code line (https://codesandbox.io/p/sandbox/cdn-example-fnhfr?file=%2Findex.html). Or this screenshot saves you a click.

For some reason, Im getting the line numbers from the left side one line off compared to the code. Maybe a screenshot helps to see what I mean.

As you see from the picture, line 5 number has a different color. That’s because my cursor is in line 5 despite the line numbers on the left are off.

Does anyone knows why this could happen ? Some CSS clashing ? I have totally no clue on what to look for.

Thanks.