IntlProvider error in react native(expo): [Error: FORMATTING_ERROR: Intl.PluralRules is not available in this environment

[ranlix]

in expo repo, I tried to add polyfills and enable hermes engine in app.json like this:

"use-intl": "^4.3.0"
"expo": "~52.0.46",

// app.json
{
  "expo": {
    "name": "mobile",
    "slug": "mobile",
    "version": "1.0.0",
    "jsEngine": "hermes",
    "ios": {
      "supportsTablet": true
    },
    ...
}

// LocaleContext.tsx

// // Polyfills must be imported first
import '@formatjs/intl-pluralrules/polyfill-force'

// // Then import locale data
import '@formatjs/intl-pluralrules/locale-data/en'
import '@formatjs/intl-pluralrules/locale-data/es'

import { messages } from '@repo/shared/infra/i18n'
import { locales as supportedLocales, type Locale } from '@repo/shared/infra/i18n/config'
import AsyncStorage from '@react-native-async-storage/async-storage'
import React, { createContext, useContext, useEffect, useState } from 'react'
import { IntlProvider } from 'use-intl'

interface LocaleContextType {
  locale: Locale
  setLocale: (locale: Locale) => Promise<void>
}

const LocaleContext = createContext<LocaleContextType | undefined>(undefined)

export const LocaleProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [locale, setLocaleState] = useState<Locale>('en')

  useEffect(() => {
    const initLocale = async () => {
      const savedLocale = await AsyncStorage.getItem('userLocale')
      if (savedLocale && supportedLocales.includes(savedLocale as Locale)) {
        setLocaleState(savedLocale as Locale)
      }
    }
    initLocale()
  }, [])

  const setLocale = async (newLocale: Locale) => {
    try {
      await AsyncStorage.setItem('userLocale', newLocale)
      setLocaleState(newLocale)
    } catch (error) {
      console.error('Error saving locale:', error)
    }
  }

  return (
    <LocaleContext.Provider value={{ locale, setLocale }}>
      <IntlProvider
        messages={messages[locale]}
        locale={locale}
        onError={(error) => {
          console.warn('IntlProvider error:', error)
          if (error.code === 'FORMATTING_ERROR') {
            return
          }
          throw error
        }}
      >
        {children}
      </IntlProvider>
    </LocaleContext.Provider>
  )
}

export const useLocale = () => {
  const context = useContext(LocaleContext)
  if (!context) {
    throw new Error('useLocale must be used within LocaleProvider')
  }
  return context
}

// messages: "minutes": "{count, plural, =1 {1 minute} other {# minutes}}"

<ThemedView>
  <ThemedText type="subtitle">t with plurals</ThemedText>
  <ThemedText>{t('unit.minutes', { count: 42 })}</ThemedText>
</ThemedView>

And then there is a error warning:
IntlProvider error: [Error: FORMATTING_ERROR: Cannot read property 'prototype' of undefined] [Component Stack]

If I remove Polyfills codes, the error should be:
IntlProvider error: [Error: FORMATTING_ERROR: Intl.PluralRules is not available in this environment.
Try polyfilling it using "@formatjs/intl-pluralrules"