How to display the line number in a mui textfield component - reactjs

Question

I have to do a little code editor online so I need to display in front of each line the number of the line.
Is it possible with the mui textfield's component ?
I've tried with a which is changing with the number of line of the text fields but they are not aligned and they don't fit
For now my code look like this :
import { Box, TextField } from "#mui/material";
import { MainBox, TextArea } from "./styles";
function useLineText(nbLines = 1): [any, any] {
const [newLine, setNewLine] = useState('1\n')
const updateNewLine = function() {
let myLine = '1\n'
for(let count = 1; count < nbLines; count++) {
myLine = myLine + `${count + 1}\n`
//console.log(myLine)
}
setNewLine(myLine)
}
return [newLine, updateNewLine]
}
const CodeInputField = () => {
const [nbLines, setNbLines] = useState(1)
const [CountLineText, setCountLineText] = useLineText(nbLines)
function replaceWithBr() {
return CountLineText.replace(/\n/g, "<br />")
}
function useHandleTyping(event: React.ChangeEvent<HTMLInputElement>) {
//console.log(event.target.value.toString().split(/\r\n|\r|\n/).length)
setNbLines(event.target.value.toString().split(/\r\n|\r|\n/).length)
setCountLineText(nbLines)
//console.log(CountLineText)
}
return(
<Box sx={MainBox}>
<p dangerouslySetInnerHTML={{__html: replaceWithBr()}}/>
<TextField sx={TextArea} multiline rows={8} onChange={useHandleTyping} id="outlined-multiline-static" />
</Box>
)
}
export default CodeInputField
and for the style :
export const MainBox = () => ({
display: 'flex',
flexDirection: 'row',
border: 1,
borderRadius: 2,
width: 'fit-content',
maxHeight: 1/2,
fontSize: 17.5
})
export const TextArea = () => ({
borderLeft: 1,
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
borderRadius: 0
}
})
thank for the help