I want to bind text field with below approach but facing issue when i enter characters in text field. For first character it works fine but when i enter second character the control/focus comes out of text field then i need to click again on text field to enter the second character. I found out that this issue is because of text field bound as separate function in component, but i need this approach only how can i fix this issue?

code that i tried

const Search: React.FC = () => {

   const [addressTest, setAddressTest] = useState<string>('');

   const AdvancedSearch = () => {
      return (
         <>
            <Grid container rowSpacing={0.4} columnSpacing={3} id="advanced_search_section">
               <Grid item xs={12} sm={6} md={3}>
                  <InputLabel htmlFor="address">Address</InputLabel>
                  <TextField
                     value={addressTest}
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                        setAddressTest(event.target.value);
                     }}
                  />
               </Grid>
            </Grid>
         </>
      )
   }

   //Render all the UI fields for search screen
   return (
      <>
         <AdvancedSearch />
      </>
   );
}

export default Search;