react-simple-code-editor scrollbar not working properly with custom CSS

I’m using react-simple-code-editor in my React app.

Deployed app: https://ai-code-reviwer-cbv1.onrender.com/

GitHub repo: https://github.com/santukumar01/real-time-tracker

The left editor box is not scrolling properly. When I type long code, the content gets cut off instead of scrolling. I tried adding custom CSS with overflow and ::-webkit-scrollbar, but it’s still not working as expected.

 .editor {
   font-family: "Fira Code", monospace;
   font-size: 15px;
   line-height: 1.5;
   width: 100%;
   height: 100%;
   border-radius: 8px;
   box-sizing: border-box;
   position: relative;
   overflow: auto; /* supposed to scroll */
  }

 .editor pre {
   margin: 0 !important;
   padding: 12px;
   min-height: 100%;
   white-space: pre;
   word-wrap: normal;
   box-sizing: border-box;
 }

.editor::-webkit-scrollbar {
   width: 6px;
 }

.editor::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
 }