How to use the @polkadot/ui-keyring.encodeAddress function in @polkadot/ui-keyring

export default function toAddress (value?: string | Uint8Array): string | undefined {
  if (!value) {
    return;
  }

  try {
    return keyring.encodeAddress(
      isHex(value)
        ? hexToU8a(value)
        : keyring.decodeAddress(value)
    );
  } catch (error) {
    console.error('Unable to encode address', value);
  }
}

export default function toAddress (value?: string | Uint8Array | null): string | undefined {
  if (!value) {
    return;
  }

  let address: string | undefined;

  try {
    address = keyring.encodeAddress(
      isHex(value)
        ? hexToU8a(value)
        : keyring.decodeAddress(value)
    );
  } catch (error) {
    console.error('Unable to encode address', value);
  }

  return address;
}

const _onChangeFile = (file: Uint8Array): void => {
    try {
      const json = JSON.parse(u8aToString(file));
      const publicKey = keyring.decodeAddress(json.address, true);
      const address = keyring.encodeAddress(publicKey);
      const isFileValid = publicKey.length === 32 && isHex(json.encoded) && isObject(json.meta) && (
        Array.isArray(json.encoding.content)
          ? json.encoding.content[0] === 'pkcs8'
          : json.encoding.content === 'pkcs8'
      );

      setImport([address, json, isFileValid]);
    } catch (error) {
      setImport([null, null, false]);
      console.error(error);
    }
  };

const _onClickNew = (): void => {
    const phrase = mnemonicGenerate(12);
    const { address } = keyring.createFromUri(phrase);

    setAddress(keyring.encodeAddress(address, ss58Format));
    setPhrase(phrase);
  };

(prevState: State): State => {
        let { address = prevState.address, name = prevState.name, tags = prevState.tags } = newState;
        let isAddressValid = true;
        let isAddressExisting = false;
        let newAddress = address;

        try {
          newAddress = keyring.encodeAddress(
            keyring.decodeAddress(address)
          );
          isAddressValid = keyring.isAvailable(newAddress);

          if (!isAddressValid) {
            const old = keyring.getAddress(newAddress);

            if (old.isValid) {
              if (!allowEdit) {
                name = old.getMeta().name || name;
              }

              isAddressExisting = true;
              isAddressValid = true;
            }
          }

const _onChangeAddress = (input: string): void => {
    let address = '';
    let isAddressValid = true;
    let isAddressExisting = false;

    try {
      address = keyring.encodeAddress(
        keyring.decodeAddress(input)
      );
      isAddressValid = keyring.isAvailable(address);

      if (!isAddressValid) {
        const old = keyring.getAddress(address);

        if (old) {
          const newName = old.meta.name || name;

          isAddressExisting = true;
          isAddressValid = true;

          setName({ isNameValid: !!(newName || '').trim(), name: newName });
        }
      }

useEffect((): void => {
    ready && address && setAddress(keyring.encodeAddress(address, ss58Format));
  }, [address, ss58Format]);

const _onClickNew = (): void => {
    const phrase = mnemonicGenerate(12);
    const { address } = keyring.createFromUri(phrase);

    setAddress(keyring.encodeAddress(address, ss58Format));
    setPhrase(phrase);
  };
  const _onChangeSS58Format = ({ currentTarget: { value } }: React.SyntheticEvent): void => {

useEffect((): void => {
    address && setAddress(keyring.encodeAddress(address, ss58Format));
  }, [address, ss58Format]);