I'm trying to send the user to my app IOS settings using expo linking:

The component:

<Card disabled={true}>
              <Text>{isSettingModalOpen}</Text>
              <Button onPress={() => setIsSettingModalOpen(null)}>
                DISMISS
              </Button>
              <Button
                onPress={() => {
                  openAppSettings();
                }}
              >
                Go To Settings
              </Button>
</Card>

The logic of the open settings button:

export const openAppSettings = async () => {
  try {
    if (Platform.OS === "ios") {
      await Linking.openURL("app-settings:");
    } else {
      const pkg = Constants.manifest.releaseChannel
        ? Constants.manifest.android.package build
        : "host.exp.exponent"; 

      await IntentLauncher.startActivityAsync(
        IntentLauncher.ActivityAction.APPLICATION_DETAILS_SETTINGS,
        { data: "package:" + pkg }
      );
    }
  } catch (e) {
    console.log("Error -openAppSettings-", e);
  }
};

On android devices this code works without any issues, but on IOS devices, when we press on "go to settings button" we get the error:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

We aren't using any refs at our project so any help would be appreciated.