React keyborad landscape - reactjs

Question

I've a problem with react.
I've one web app with some forms and inputs field.
When I click and use the input field with the keyboard from pc, smartphone or tablet on portrait mode it's all ok, but when I change the orientation of the device and click on one field the keyboard appears, but it cover all the view.
How can I solve this problem?
Example of my Search component form:
<div className="vv-search-form-layout">
<div className="d-flex flex-row search-form">
<input
type='text'
name="search"
value={searchValue}
className="form-control search-text"
onChange={changeSearch}
onKeyPress={onKeyPress}
ref={this.searchInput}
/>
</div>
</div>
css:
.vv-search-form-layout {
display: flex;
justify-content: center;
margin-bottom: 1rem;
#media (min-width: $md) {
margin-bottom: 0;
}
}
.search-form {
text-align: center;
justify-content: center;
align-items: center;
max-width: 35rem;
width: 100%;
}