inputLabel | easy cross browser compatible way to have labels | Frontend Framework library

I have a checkout form which I made using material UI looking like this:

It seems minor but I'd like to change the layout so that First Name and Last Name etc. are all on the same row, looking more like this (but I'm not sure how to go about it):

Here's the code for my address form component:

I have pretty standard React Material UI grid with InputLabel's and Input's placed in horizontal row. The code is:

I have researched this topic for quite some time now, yet I still cannot make the 'Remove' button in the child component (ControlledOpenSelect) only remove the item with the key it was passed - by using the callback function.

My ControlledOpenSelect (the child component):

I am new to Reactjs I am trying to build an address form with 3 Select ( country, State, City ) I used React hock so when the page first load it will fetch countries list to country select after that when user select country it will fetch states list to state select and after that when user select state it will fetch cities list to city select my issue with state hock I store the value of the user selected in the state but it did not update the value in the state in many locations I keep getting " undefined " like when the page load I get countries list as an array and I get the first country in the list as the default select item in country select but I still get keep getting " undefined " I tried many ways but still getting the same result and bellow is my code

In the picture, you can see that my label is behind the outline but I don't know why it is. I didn't give any kind of style I just gave a minWidth that's it but still, it's one kind of broken I mean the label is behind the line. Here is the code:

Given an array const places = [" a1", "a2", "a3"]; and

I am trying to customize the Select component from Material UI.

This is what it looks like:

However, when the select component is focused, I want to change the border-color from material UI's blue to a custom red color.

I tried setting the styles but it doesn't do anything at all

I have a a Material UI OutlinedInput on top of which I'm using MaskedInputfrom react-text-mask, when I originally put text into it and element is not in focus, the inputted text displays correctly, however when I close down the Dialog window with this component and reopen there's some strange behavior with text overplapping over placeholder text.

That looks like this:

When I originally input text:

Here's my code for this component:

All I want to achieve is a page that has a header that reads: "Survey Start" and then a user select interface under that. I am envisioning a very simple component: