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

import React, { useState } from 'react';
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 });
  };