How to use the react-redux.createDispatchHook function in react-redux

import * as React from "react";
import { Kirby, ParentPlugin } from "@kirby-web3/parent-core";
// @ts-ignore: @types/react-redux doesn't have create*Hook yet
import { Provider, ReactReduxContextValue, createStoreHook, createDispatchHook, createSelectorHook } from "react-redux";

export interface IKirbyContext extends ReactReduxContextValue {
  kirby: Kirby;
}

const kirby = new Kirby();
const startingContext: IKirbyContext = { kirby, store: kirby.redux, storeState: {} };
export const ReduxContext = React.createContext(startingContext);
export const KirbyContext = React.createContext(startingContext);

export const useStore = createStoreHook(KirbyContext);
export const useDispatch = createDispatchHook(KirbyContext);
export const useSelector = createSelectorHook(KirbyContext);

export interface KirbyProviderProps {
  config: any;
  plugins: ParentPlugin[];
}
export const KirbyProvider: React.FunctionComponent = ({ plugins, children, config }) => {
  const [context, _] = React.useState(startingContext);

  React.useMemo(() => {
    kirby.initialize(plugins, config).catch(err => {
      console.log("error initializing kirby!", err);
    });
  }, [plugins, config]);

  return (

export interface KirbyChildProviderProps {
  theme?: Theme;
  plugins: ChildPlugin[];
  config?: any;
}

export interface ICoreContext extends ReactReduxContextValue {
  core: ChildCore;
}
const core = new ChildCore();
const startingContext = { core, store: core.redux, storeState: {} };
export const ReduxContext = React.createContext(startingContext);
export const CoreContext = React.createContext(startingContext);

export const useStore = createStoreHook(CoreContext);
export const useDispatch = createDispatchHook(CoreContext);
export const useSelector = createSelectorHook(CoreContext);

export const KirbyChildProvider: React.FC = ({ plugins, theme, children, config }) => {
  const [context, _] = React.useState(startingContext);

  React.useMemo(() => {
    core.initialize(plugins, config || {}).catch(err => {
      console.log("error initializing kirby!", err);
    });
  }, [plugins, config]);

  return (
    
      
        
          <div>{children}</div>

export const ErrorContext = React.createContext<
  ((error: Error, errorInfo: { componentStack: string }) => void) | undefined
>(undefined)

export function Provider(
  props: ProviderProps & { children: React.ReactNode }
) {
  return 
}

export function useScope(enforcedScope?: string) {
  const { scope } = React.useContext(ScopeContext)
  return enforcedScope === undefined ? scope : enforcedScope
}

export const useDispatch = createDispatchHook(EditorContext)
export function useScopedDispatch(enforcedScope?: string) {
  const scope = useScope(enforcedScope)
  const dispatch = useDispatch()
  return React.useCallback(scopeDispatch(dispatch, scope), [dispatch, scope])
}

function scopeDispatch(dispatch: (action: Action) => void, scope: string) {
  return (scopedAction: (scope: string) => Action) => {
    dispatch(scopedAction(scope))
  }
}

export const useSelector = createSelectorHook(EditorContext)
export function useScopedSelector(
  scopedSelector: (state: ScopedState) => T,
  enforcedScope?: string

import { createContext } from 'react';
import { createDispatchHook, createSelectorHook } from 'react-redux';

const context = createContext();

const useDispatch = createDispatchHook(context);
const useSelector = createSelectorHook(context);

context.displayName = 'WebChatReduxContext';

export default context;

export { useDispatch, useSelector };