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

import { ThemeProvider } from 'styled-components';
import { Api, registry } from '@polkadot/react-api';
import { QueueConsumer } from '@polkadot/react-components/Status/Context';
import Queue from '@polkadot/react-components/Status/Queue';
import { BlockAuthors, Events } from '@polkadot/react-query';

import Apps from './Apps';

const rootId = 'root';
const rootElement = document.getElementById(rootId);

// we split here so that both these forms are allowed
//  - http://localhost:3000/?rpc=wss://substrate-rpc.parity.io/#/explorer
//  - http://localhost:3000/#/explorer?rpc=wss://substrate-rpc.parity.io
const urlOptions = queryString.parse(location.href.split('?')[1]);
const _wsEndpoint = urlOptions.rpc || process.env.WS_URL || settings.apiUrl;

if (Array.isArray(_wsEndpoint)) {
  throw new Error('Invalid WS endpoint specified');
}

// on some combo of browsers/os, this https://polkadot.js.org/apps/?rpc=ws://127.0.0.1:9944#/explorer
// turns into ws://127.0.0.1:9944#/explorer (split these)
const wsEndpoint = _wsEndpoint.split('#')[0];

console.log('WS endpoint=', wsEndpoint);

try {
  const types = store.get('types') || {};
  const names = Object.keys(types);

  if (names.length) {

// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.

import { ApiProps } from '@polkadot/react-api/types';
import { I18nProps as Props } from '@polkadot/react-components/types';

import React from 'react';
import styled from 'styled-components';
import { useApi } from '@polkadot/react-hooks';
import settings from '@polkadot/ui-settings';

import translate from '../translate';
import BaseOverlay from './Base';

const isFirefox = typeof (window as any).InstallTrigger !== 'undefined';
const wsUrl = settings.apiUrl;
const isWs = wsUrl.startsWith('ws://');
const isWsLocal = wsUrl.includes('127.0.0.1');
const isHttps = window.location.protocol.startsWith('https:');

function ExtensionOverlay ({ className, isWaitingInjected, t }: ApiProps & Props): React.ReactElement | null {
  if (!isWaitingInjected) {
    return null;
  }

  return (
    
      <div>{t('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>