Input text goes out of bound while typing | react-simple-keyboard

Question

I am facing text going out of bound issue while typing. I am using styled component for UI, and react-simple-keyboard

<EnterID
                            type="text"
                            id="Id"
                            value={this.state.input.Id}
                            placeholder={tempStrings.string}
                            onChange={this.setId.bind(this)}
                            onFocus={() => this.setInput("Id")}>
</EnterID>

Issue:

you can see text getting out of bound and it will keep adding right so you wont be able to know what you are currently typing.

setInput(inputName) {
        this.setState(
            {
                inputName: inputName
            },
            () => {
                let val: any = $("#" + inputName).val();
                this.keyboard.setInput(val);
            }
        );
    }

I searched a lot but I did not get the solution proper.

Weird: with hardware keyboard(mac keyboard) its just works fine the only issue when I start using app keyboard which is third party component. But I guess that should not affect.

CodeSandBox Link - https://codesandbox.io/s/myp0l6xnj