Using custom countries lists throws fatal error

[josephpalma]

Describe the bug
There is a fatal error when switching between custom country lists in the PhoneInput component. For example, if I want to use only North American countries:

  const countries = defaultCountries.filter(country =>
    ['ca', 'us', 'mx'].includes(country[1])
  );

and switch between them during runtime:

countries = {condition ? countries : defaultCountries}

In my Nextjs 13.4.9 environment I experience this error:

Unhandled Runtime Error

TypeError: t is undefined
Call Stack
D
node_modules\react-international-phone\build\index.mjs (1:7491)
Q
node_modules\react-international-phone\build\index.mjs (1:13387)
renderWithHooks
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10697:0)
updateFunctionComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15180:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (17324:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25689:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24540:0)
workLoopSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24256:0)
renderRootSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24211:0)
recoverFromConcurrentError
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23446:0)
performSyncWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23707:0)
flushSyncWorkAcrossRoots_impl
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (9970:0)
flushSyncWorkOnAllRoots
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (9928:0)
processRootScheduleInMicrotask
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10072:0)
scheduleImmediateTask/<
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10243:0)

To Reproduce
Steps to reproduce the behavior:

1. Create a React component that implements <Phone Input />
2. Pass a conditional country list to the countries prop.
3. In a session, switch between country lists by toggling the condition.
4. See error

Expected behavior
No fatal errors when switching between country lists.

Desktop:

• OS: Windows 11
• Browser: tested on newest versions of Firefox, Chrome and Safari

Additional context
I tested this error in a Create React App as well as Nextjs with similar results. I believe this error has to do with improper indexing given to React. The workaround I'm currently using is to duplicate the component, and pass in the proper component at runtime:

  const phoneInput1 = () => (
    <PhoneInput key="pi1" {...phoneInputConfig} countries={countries} />
  );

  const phoneInput2 = () => (
    <PhoneInput key="pi2" {...phoneInputConfig} countries={defaultCountries} />
  );

return (
      {condition && phoneInput1()}
      {!condition && phoneInput2()}
);

[StrikerXx798]

Up, is now actually!