How to use the @polkadot/ui-settings.availablePrefixes function in @polkadot/ui-settings

import settings from '@polkadot/ui-settings';
import { setSS58Format } from '@polkadot/util-crypto';

import { Button, Dropdown } from '../../components';
import { windowOpen } from '../../messaging';
import { Back } from '../../partials';

interface Option {
  text: string;
  value: string;
}

// There are probably better ways, but since we set the popup size, use that
const isPopup = window.innerWidth <= 480;
const cameraOptions = settings.availableCamera.map(({ text, value }): Option => ({ text, value: `${value}` }));
const prefixOptions = settings.availablePrefixes.map(({ text, value }): Option => ({
  text: value === -1
    ? 'Default (Substrate or as specified)'
    : text,
  value: `${value}`
}));

export default function Settings (): React.ReactElement<{}> {
  const [camera, setCamera] = useState(settings.camera);
  const [prefix, setPrefix] = useState(`${settings.prefix}`);

  const _onChangeCamera = (camera: string): void => {
    setCamera(camera);

    settings.set({ camera });
  };

import React, { useEffect, useState, useMemo } from 'react';
import { isLedgerCapable } from '@polkadot/react-api';
import { Button, Dropdown } from '@polkadot/react-components';
import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';

import translate from './translate';
import { createIdenticon, createOption, save, saveAndReload } from './util';
import SelectUrl from './SelectUrl';

interface Props extends I18nProps{
  isModalContent?: boolean;
  onClose?: () => void;
}

const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
const iconOptions = uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default']));
const ledgerConnOptions = uiSettings.availableLedgerConn;
const availableLanguages: SetOption[] = [
  {
    text: 'Default browser language (auto-detect)',
    value: 'default'
  },
  {
    text: 'English',
    value: 'en'
  },
  {
    text: '日本語',
    value: 'ja'
  }
];

<textarea value="{phrase}" readonly="" rows="{4}" cols="{40}">      &lt;/section&gt;
      &lt;section&gt;
        &lt;label&gt;icons&lt;/label&gt;
        &lt;Identicon className='icon' value={address} /&gt;
        &lt;Identicon className='icon' value={address} theme='polkadot' /&gt;
        &lt;Identicon className='icon' value={address} theme='beachball' /&gt;
      &lt;/section&gt;
      &lt;section&gt;
        &lt;label&gt;address&lt;/label&gt;
        {address}
      &lt;/section&gt;
      &lt;section&gt;
        &lt;label&gt;ss58 format&lt;/label&gt;
        &lt;select onChange={_onChangeSS58Format} value={ss58Format}&gt;
          {settings.availablePrefixes
            .filter((_, index): boolean =&gt; index !== 0)
            .map(({ text, value }): React.ReactNode =&gt; (
              &lt;option key={value} value={value}&gt;{text}&lt;/option&gt;
            ))
          }
        &lt;/select&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  );
}
</textarea>