I have three states of the text field in my design. One is the normal input field, one is when they have input the no. and the next state is when the number is locked as in users cannot change the input field once they enter here.
If your text becomes read-only, then give it the coloring of read-only text. In your case, that's near-black text on a white background, such as you use for your labels. No shading and no border.
I have found that any adornment of a read-only field with borders, colors, or such can lead some users to think it might be editable.
There are some benefits to visually distinguishing fields from labels, but to users they don't have a big functional difference. Read-only fields and labels (and headings and instructions) are all just stuff to read and not otherwise interact with, as far as users are concerned. It may be sufficient to separate the label from the field with a colon, as I've done above, so users recognize the text below as a field entry. You can also try different font (e.g., serif font for fields), although that's a little arbitrary.
Don't make the locked field look "disabled" even if that may be programmatically easier; that is, don't use light gray text on your slightly gray background. That encourages users to skip over the field, like it's irrelevant. It'll also probably fail W3C accessibility standards.
I suggest using the same style as in Materal 2.0. https://m2.material.io/components/text-fields#outlined-text-field:~:text=domain%20address%20suffix-,States,-Outlined%20text%20field Now it's too hard to visually separate what state each of the designs is in. Try to play more with style and writing.