Detect "Request Mobile Website” and "Request Desktop Website" in the iphone IOS

Question

I have a problem detecting "Request Mobile Website” and "Request Desktop Website" modes in the iPhone IOS using ReactJs. Because I have a problem (option bar doesn't have values) in the desktop website for the iOS phone.

Below is the result in the desktop mode in the iOS phone:

If in the mobile website mode on the iOS phone should be no problem:

Below is my coding:

function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  // Windows Phone must come first because its UA also contains "Android"
  if (/windows phone/i.test(userAgent)) {
    return "Windows Phone";
  }

  if (/android/i.test(userAgent)) {
    return "Android";
  }

  // iOS detection from: http://stackoverflow.com/a/9039885/177710
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return "iOS";
  }

  return "unknown";
}

const getMobileOperatingSystemValue = getMobileOperatingSystem();


<Form.Group>
                  <Form.Label>
                    <FormattedMessage id="GENERAL.DURATION" />
                  </Form.Label>
                  {(getMobileOperatingSystemValue === "Android" || getMobileOperatingSystemValue === "Windows Phone" || getMobileOperatingSystemValue === "unknown") ? (
                    <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>
                  ) : (
                    <Select
                      styles={{
                        // Fixes the overlapping problem of the component
                        menu: provided => ({ ...provided, zIndex: 9999 })
                      }}
                      options={optionsHour}
                      value={{ label: durationHour, value: durationHour }}
                      onChange={(e) => { setDurationHour(e.value) }}
                    >
                    </Select>
                  )}
                </Form.Group>

Hope someone can guide me on how to detect "Request Mobile Website" and "Request Desktop Website" mode using react code. Thanks.