Current Design:

[![Current design](https://i.stack.imgur.com/Zv4Tg.png)](https://i.stack.imgur.com/Zv4Tg.png)

Expected design:

[![enter image description here](https://i.stack.imgur.com/Xuj6O.png)](https://i.stack.imgur.com/Xuj6O.png)

The TextField tag looks like this:

```
<TextField
        multiline={false}
        autoFocus
        placeholder={props.defaultAmt}
        helperText="Enter amount to pay"
        margin="normal"
        InputProps={{
            startAdornment: <InputAdornment position="start">₹</InputAdornment>
        }}
        />

```

I want to center everything in the TextField. I have tried using `textAlign: 'center'` but it doesn't work.