How to move the cursor to custom position after each input in React textfield?

Question

I wanted to append % to the value entered in the text field. When I do so the cursor moves towards the end of the input text as shown below. But I wanted it two stays right after the value two-step backward. I tried the solution given here with event.target. But it doesn't work

             <StyledTextField
                          id="managePrctgFee"
                          name="managePrctgFee"
                          value={
                            this.state.managePrctgFee 
                              ? this.state.managePrctgFee
                                  .toString()
                                  .replace(/^0+/, '') + ' %'
                              : '0 %'
                          }
                          onChange={this.handleChange}
                          fullWidth
                        />

onChange

handleChange() {
      return e => {
        const val = e.target.value.toString().replace(/ |%|[a-zA-Z]/gm, '')
        
        e.target.selectionStart = val.toString().length - 3
        e.target.selectionEnd = val.toString().length - 3
        this.setState({...this.state,managePrctgFee:val})
      }
    }

But still, the cursor stays at the end after each input. I wanted the cursor to stay two strings before ie before % This makes it UI wise better and easier delete the values written.

The End result should be like after each input

I am not making the % string outside the input box using a <span> since there is some UI complexity in my project to do that. Is there a way to do this way by moving the cursor two-step backward after each input