I have a flex container in which I want to have another flex container which scrolls content when it is too large to fit the screen. This is what I have so far:

I have two OutlinedInput in the UI, when i click on any of them, both are getting focused. I tried using normal HTML input tag to check, normal input elements are working fine. I have attached the UI screenshot and the code. First snippet is of my component file and second one is of CSS file.