Question: I know there are a lot of topics on this, and I've done my best reading and implementing their solutions, but I just cant get it to work properly 

Im trying to format the phone number so that it displays in a certain format.

I created a demo of how it works in my app.
<https://codesandbox.io/s/dank-leaf-94s3w?file=/src/App.js>

Edit: sorry to describe the issue a bit more. 

everything works fine when you are just typing out a # front to back

but when I try to modify the middle numbers the cursor will jump to the end after each input.

Thanks

Answer: 
Hi so the problem is that you pass a new value and that will be just like inputing the whole value. And this will cause the cursor to move to the end.

You can overcome it by requesting a window animation frame and move the cursor back to where it was:

```
const caret = target.selectionStart;
    const element = target;
    window.requestAnimationFrame(() => {
      element.selectionStart = caret;
      element.selectionEnd = caret;
    });

```

Here is a copy of your [sandbox](https://codesandbox.io/s/competent-morse-ot54n?file=/src/Demo.js).
You are passing the ref into the wrong element. In `@material-ui/core/TextField` you must pass the ref to the `inputProps` instead of direct ref.

Just change the:

`ref={input}`

to:

`inputProps={{ ref: input }}`

There are other issues in your code such as not parsing the value to the normal string state but the issue for jumping was for `ref`