How to use the @dbeining/react-atom.Atom.of function in @dbeining/react-atom

function getAppManifestAtom (appUri) {
  // Out: Atom promise containing a either an app manifest or a null value.
  // Avoid passing outside this module to avoid conflicts if there are multiple react-atom packages in the project
  const atom = Atom.of(null)
  const setValue = (value) => swap(atom, state => value)
  try {
      const manifestUri = appUri + "/manifest.json"
      const controller = new AbortController()
      const cleanup = () => controller.abort()
      console.info("FETCHING:", manifestUri)
      fetch(manifestUri, {signal: controller.signal})
      .then ( response => {response.json().then( setValue )})
      .catch ( err => {console.warn("Failed to get manifest for:", appUri, err)})
      // .finally (() => setValue({}))
    } catch (err) {
      console.warn("Failed fetching when mounting:", err)
      setValue({error: err})
    }
  return (atom)
}

LoadingIndicator: DefaultLoadingIndicator,
      Router: BrowserRouter,
      Layout: DefaultLayout,
    },
    errorComponents: {},
    registry: {
      extensions: {},
      pages: {},
    },
    routes: {},
    data: {},
    portals: {},
    modules: [],
  };

  const globalState = Atom.of(extend(defaultState, customState));

  if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PILET !== undefined) {
    addChangeHandler(globalState, 'debugging', ({ current, previous }) => {
      const action = new Error().stack.split('\n')[6].replace(/^\s+at\s+Atom\./, '');
      console.group(
        `%c Piral State Change %c ${new Date().toLocaleTimeString()}`,
        'color: gray; font-weight: lighter;',
        'color: black; font-weight: bold;',
      );
      console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous);
      console.log('%c Action', `color: #03A9F4; font-weight: bold`, action);
      console.log('%c Next', `color: #4CAF50; font-weight: bold`, current);
      console.groupEnd();
    });
  }

export function createGlobalState({
  breakpoints = defaultBreakpoints,
  translations = {},
  routes = {},
  language,
  components = {},
  Dashboard = DefaultDashboard,
  Loader = DefaultLoader,
  ErrorInfo = DefaultErrorInfo,
}: GlobalStateOptions = {}) {
  const available = Object.keys(translations);
  const globalState = Atom.of({
    app: {
      language: {
        selected: getUserLocale(available, available[0] || 'en', language),
        available,
        translations,
      },
      layout: {
        current: getCurrentLayout(breakpoints, defaultLayouts, 'desktop'),
        breakpoints,
      },
      components: {
        Dashboard,
        ErrorInfo,
        Loader,
        custom: components,
      },

import React, { Component, createContext, useState, useEffect, useContext, useCallback, useReducer } from 'react'
import { UserSession, AppConfig, Person, lookupProfile } from 'blockstack'
import { Atom, swap, useAtom, deref} from "@dbeining/react-atom"
import { isNil, isNull, isEqual, isFunction, isUndefined, merge, set, identity } from 'lodash'

const defaultValue = {userData: null, signIn: null, signOut: null}

const contextAtom = Atom.of(defaultValue)

/**
 * React hook for the Blockstack SDK
 *
 * @return {{userSession: UserSession, userData: ?UserData, signIn: ?function, signOut: ?function, person: ?Person}} Blockstack SDK context
 *
 * @example
 *
 *     useBlockstack()
 */

export function useBlockstack () {
  return( useAtom(contextAtom) )
}

export function setContext(update) {