How to add material ui textfield on image?

Question

I want to add material-ui textfield on the image. Below is my working code.

    export default function Header() {
      const classes = useStyles();
      const [email, setState] = React.useState('');
    
      const handleChange = (e: any) => {
        setState(e.target.value);
      };
    
      const [src, { blur }]: any = ImagePro(
        landingblur,
        landing,
      );
    
      return (
        <React.Fragment>
          <Paper
            square
            elevation={0}
            className={classes.g_landingcontainer}
            style={{ position: 'relative', background: '#ffcc00' }}
          >
            <img
              src={src}
              style={{
                filter: blur ? 'blur(20px)' : 'none',
                transition: blur ? 'none' : 'filter 0.3s ease-out',
              }}
              className={classes.g_headerimage}
            />
            <Box className={classes.g_landingotherheader}>
              <Grid container>
                <Hidden smDown>
                  <Grid item xs={12}>
                    <Typography variant="h1" align="left">
                      hello hello abnsk akjknsmdcniodnso<br />
                      <TypedReact
                        typeSpeed={70}
                        backSpeed={30}
                        loop={true}
                        strings={[
                          'xyz',
                          'abc',
                          'kjhaa',
                          'lajdkcnd j',
                          'dkcskmkcdmslm',
                          'dcnjiiweicnwe',
                          'pkpokkonjbhjse',
                        ]}
                      />{' '}
                      <br />
                    </Typography>
                  </Grid>
                </Hidden>
                <Hidden smUp>
                  <Grid item xs={12}>
                    <Typography variant="h1">
                   snajksncajknkn
 </Typography>
                    <Typography variant="h2">
                      <TypedReact
                        typeSpeed={70}
                        backSpeed={30}
                        loop={true}
                        strings={[
                          'njksansk',
                          's,axla;s,x;as,;',
                          'wxjnahiojoksm',
                          'sxijnm asoam',
                          'sjxnaknos',
                          'sxmma asmak',
                          'askmxakmskamk',
                        ]}
                      />{' '}
                      <br />
                    </Typography>
                  </Grid>
                </Hidden>
                <Grid item xs={10} md={6}>
                  <Typography
                    variant="body1"
                    style={{ color: '#3f3c3d' }}
                    className={classes.g_landbanner}
                  >
sjannsakmsk asoasmoasm HQBAIiznqo sxoanoxsasmoxm aokmsoomxo.
                  </Typography>
                </Grid>
                <br />
                <br />
                <Grid container>
                  <Grid item xs={11} md={3}>
                    <br />
                    <form>
                      <HeaderText
                        label="Enter your email"
                        variant="outlined"
                        name="Email"
                        autoComplete="off"
                        value={email}
                        fullWidth
                        onChange={handleChange}
                        InputLabelProps={{ style: { color: '#2F4858' } }}
                        className={classes.g_headertext}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <DraftsIcon style={{ color: '#2F4858' }} />
                            </InputAdornment>
                          ),
                        }}
                      />
                    </form>
    
                    <ContactUs
                      variant="contained"
                      text={email}
                      onClick={() =>
                        Event(
                          'Contact',
                          'Client want to Contact with us',
                          'Landing Page',
                        )
                      }
                    />
                  </Grid>
                </Grid>
              </Grid>
            </Box>
          </Paper>
        </React.Fragment>
      );
    }

Headertext component code:

import { withStyles, TextField } from '@material-ui/core';

const HeaderText = withStyles({
  root: {
    '& input:valid + fieldset': {
      borderColor: '#2F4858',
      borderWidth: 2,
    },
    '& input:invalid + fieldset': {
      borderColor: '#2F4858',
      borderWidth: 2,
    },
    '& input:valid:focus + fieldset': {
      borderLeftWidth: 6,
      padding: '4px',
      borderColor: '#2F4858',
      // override inline-style
    },
  },
})(TextField);

export default HeaderText;

The above code works fine on the desktop but not on a mobile screen. On mobile screen on click of textfield image container got shrink(maybe..) below is a screenshot:

Please guys help me. I don't want to show the shrinking window on the click of the text field.