Select Dropdown Input control for ReactJS doesn't show value on the iPhone

I have a problem with the iOS operating system (iPhone). Select dropdown input control for ReactJS doesn't show value on the iPhone. Webpage and Android are no problems. Below are my coding:

const [durationHour, setDurationHour] = useState("0");
var getDurationHour = propApptData.duration / 60;
var intDurationHour = ~~getDurationHour;
setDurationHour(intDurationHour);
<Col lg="2">
<Form.Group>
  <Form.Label>
    <FormattedMessage id="GENERAL.DURATION" />
  </Form.Label>
  <Form.Control
    as="select"
    name="duration"
    value={durationHour}
    onChange={(e) => setDurationHour(e.target.value)}
  >
    <option value="0" label="0" />
    <option value="1" label="1" />
    <option value="2" label="2" />
    <option value="3" label="3" />
    <option value="4" label="4" />
    <option value="5" label="5" />
    <option value="6" label="6" />
    <option value="7" label="7" />
    <option value="8" label="8" />
    <option value="9" label="9" />
    <option value="10" label="10" />
    <option value="11" label="11" />
    <option value="12" label="12" />
  </Form.Control>
</Form.Group>
</Col>

The iPhone results show like below (ERRORS):

The Android phone results show like below (CORRECT):

The Webpage results show like below (CORRECT):

May I know need to use another select input bootstrap to replace the current one? If replace the current one, which bootstrap is compatible with iOS? Or do you all have good solutions to solve these iPhone issues on select input? I hope someone can guide me on how to solve this problem. Thanks.