How can I listen on orientation change on safari?

I am doing an app with expo SDK36, for some reason, the API they provide does not work on Safari.

The orientation is UNKNOWN and the event listener does not get bind.

This is how I am trying to detect the orientation:

import React, { cloneElement } from 'react';
import { ScreenOrientation } from 'expo';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import omit from 'lodash.omit';
import { createStructuredSelector } from 'reselect';
import { orientationChange as orientationChangeAction } from '../reducers/app/layoutReducer/actions';
import { selectDimensions, selectOrientation } from '../reducers/app/layoutReducer/selectors';

const mapStateToProps = createStructuredSelector({
  orientation: selectOrientation,
  dimensions: selectDimensions,
});

const mapDispatchToProps = (dispatch) => ({
  orientationChange: (dimensions) => dispatch(orientationChangeAction(dimensions)),
});

class ConnectedOrientationProvider extends React.Component {
  constructor(props) {
    super(props);
    this.onOrientationChange = this.onOrientationChange.bind(this);
  }

  // eslint-disable-next-line camelcase
  UNSAFE_componentWillMount() {
    this.subscription = ScreenOrientation.addOrientationChangeListener(this.onOrientationChange);
  }

  async componentDidMount() {
    await this.detectOrientation();
  }

  componentWillUnmount() {
    ScreenOrientation.removeOrientationChangeListener(this.subscription);
  }

  onOrientationChange({ orientationInfo: { orientation } }) {
    this.setOrientation(orientation);
  }

  setOrientation(orientation) {
    const { orientationChange } = this.props;
    orientationChange(orientation.split('_')[0]);
  }

  async detectOrientation() {
    let { orientation } = await ScreenOrientation.getOrientationAsync();

    /**
     * fix for safari (See https://github.com/expo/expo/issues/6949)
     * TODO: addOrientationChangeListener fix for Safari on iOS
     */
    if (orientation === ScreenOrientation.Orientation.UNKNOWN) {
      const { width, height } = this.props.dimensions;
      orientation = width > height ? ScreenOrientation.Orientation.LANDSCAPE : ScreenOrientation.Orientation.PORTRAIT;
    }
    this.setOrientation(orientation);
  }

  render() {
    const { children, ...rest } = omit(this.props, ['orientationChange', 'orientation', 'dimensions']);
    return cloneElement(children, rest);
  }
}

ConnectedOrientationProvider.propTypes = {
  orientationChange: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(ConnectedOrientationProvider);

How can I detect being on safari and how can I listen for orientation change on safari mobile ios?