How to use the @polkadot/ui-keyring/observable/addresses.subject function in @polkadot/ui-keyring

useEffect(() => {
    const allAddressessub = combineLatest([
      // eslint-disable-next-line @typescript-eslint/unbound-method
      accountObservable.subject.pipe(map(Object.values)),
      // eslint-disable-next-line @typescript-eslint/unbound-method
      addressObservable.subject.pipe(map(Object.values))
    ])
      .pipe(map(flatten))
      .subscribe(setAllAddresses);

    return (): void => {
      allAddressessub.unsubscribe();
    };
  }, []);

renderMyAddresses () {
    const { api } = this.context;
    const { match: { params: { currentAddress } } } = this.props;

    return (
      
        {addressObservable.subject.pipe(
          map((allAddresses: SubjectInfo) =>
            !Object.keys(allAddresses).length
              ? this.renderEmpty()
              : Object.values(allAddresses).map((address: SingleAddress) =>

useEffect(() => {
    const addressesSub = addressObservable.subject
      // eslint-disable-next-line @typescript-eslint/unbound-method
      .pipe(map(Object.values))
      .subscribe(setAddresses);

    return (): void => addressesSub.unsubscribe();
  }, []);

useEffect(() => {
    const subscription = combineLatest([
      keyringAccounts.subject,
      keyringAddresses.subject
    ]).subscribe(([acc, add]) => {
      setAccounts(acc);
      setAddresses(add);
    });

    return (): void => subscription.unsubscribe();
  }, []);

useEffect((): () => void => {
    const subscription = addressObservable.subject.subscribe((addresses): void => {
      if (mounted.current) {
        const allAddresses = addresses ? Object.keys(addresses) : [];
        const hasAddresses = allAddresses.length !== 0;

        setState({ allAddresses, hasAddresses });
      }
    });

    return (): void => {
      subscription.unsubscribe();
    };
  }, []);