How do I stop my select field height getting shortened in mobile

Question

I am developing a website to be used in a mobile app using an iframe. The only issue I am getting is that the height of select fields are getting shortened in mobile. I cant understand how to solve this problem, maybe its due to OS. I am using simple select tag of html.

Image showing select component height getting shortened

I haven't used any UI library instead just used simple select tag. Thats the code that I implemented

<select
      className={`form-control`}
      style={props.hasError ? 
        {color: inputErrorTextColor, backgroundColor: inputErrorBackgroundColor, borderColor: inputErrorBorderColor} : 
        {color: inputTextColor, backgroundColor: props.isFocused ? focusInputBackgroundColor : inputBackgroundColor, borderColor: inputBorderColor}}
      onChange={props.onChange}
      onBlur={props.onBlur}
      onFocus= {props.onFocus}
      id={props.id}
      name={props.controlName}
      value={props.value}
    >
      <option value=''>{`${selectPrefix}${props.label}`}</option>
      {props.options.map((option: any) =>
        <Option
          key={option[props.optionValueKey]}
          value={option[props.optionValueKey]}
          innerText={option[props.optionTextKey]}/>)
      }
    </select>