React useContext无法调用回调函数的问题求助

各位React大佬们，我现在遇到一个Context传递回调的问题，卡了好一会儿了，想请教下大家怎么解决~

我有个React项目，里面有两个组件：一个组件带按钮，我希望点击这个按钮的时候，另一个组件能立刻感知到这个事件。为了实现跨组件的事件通知，我自己写了个Context来管理回调函数，但现在发现回调没法正常触发，想请大家帮我找找代码里的问题。

先贴我写的Context代码：

import React, { createContext, useContext, useRef, useMemo } from "react";

// Define context properties
const ActionsContext = createContext();

export const ActionsProvider = ({ children }) => {
  const triggerCallbackRef = useRef(null);

  // Function to register the callback
  const registerCallback = (callback) => {
    triggerCallbackRef.current = callback; // Store the callback
  };

  const value = useMemo(
    () => ({
      onGetAction: () => triggerCallbackRef.current,
      onTrigerAction: registerCallback,
    }),
    []
  );

  return (
    <ActionsContext.Provider value={value}>{children}</ActionsContext.Provider>
  );
};

// Custom hook to use the context
export const useActions = () => {
  return useContext(ActionsContext);
};

我在组件里的用法是这样的：

• 需要感知事件的组件：调用onTrigerAction注册回调，期望按钮点击时触发这里的逻辑

import { useActions } from './ActionsContext';
import { useEffect } from 'react';

function ReceiverComponent() {
  const { onTrigerAction } = useActions();

  useEffect(() => {
    const handleButtonClick = () => {
      console.log("按钮被点击了！执行感知逻辑");
      // 这里是我要处理的业务逻辑
    };

    onTrigerAction(handleButtonClick);
  }, [onTrigerAction]);

  return <div>我是感知事件的组件</div>;
}

• 带按钮的组件：点击按钮时尝试获取回调并调用

import { useActions } from './ActionsContext';

function ButtonComponent() {
  const { onGetAction } = useActions();

  const handleClick = () => {
    const callback = onGetAction();
    if (callback) {
      callback();
    } else {
      console.log("糟糕，拿不到注册的回调函数...");
    }
  };

  return <button onClick={handleClick}>点击触发事件</button>;
}

现在的问题是，点击按钮时要么打印“拿不到回调”，要么就算拿到了也没触发预期的逻辑。我感觉是Context里的回调管理有问题，但自己找了半天没发现哪里错，有没有大佬能帮我分析下？或者有没有更合适的方式实现这种跨组件的事件通知呀？

备注：内容来源于stack exchange，提问作者Asking