Slide page up to make room for iOS keyboard - reactjs

Question

In React (not React Native), how can I slide the page-content up to make room for the iOS keyboard when a textarea element gains focus?
Below please find my attempt. This now works fine. However, I am curious if this is considered good practice, or if there is an existing solution?
// When the textarea element gains focus,
// scroll the content up (to make room for the iOS keyboard)
scrollContent = () => {
console.log("Gained focus");
this.scrollViewRef.current.style.marginTop = '-250px';
}
// When the textarea element loses focus,
// scroll the content back down (since the iOS keyboard is gone now)
unScrollContent = () => {
console.log("Lost focus");
this.scrollViewRef.current.style.marginTop = '0px';
// The textarea's onBlur is causing the button's onClick not to fire
// so need to manually call the button's onClick
if(e.relatedTarget === this.buttonRef.current) {
this.buttonRef.current.click();
}
}
render() {
return (
<div
ref={this.scrollViewRef}
>
<textarea
onFocus={this.scrollContent}
onBlur={this.unScrollContent}
/>
<div
ref={this.buttonRef}
onClick={this.handleSubmitForm}
tabIndex="1"
>
Save
</div>
</div>
)
}
In particular, if the user tries to click on the form's submit button while the textarea element has the focus, it will only trigger the textarea's onBlur (and scroll the page-content up again), but it won't call the submit button's onClick. Hence the need to check what element was clicked on in the if statement, and if it was the button, manually trigger the click.
Is there a better way?