我是新的React，我有一个关于优化项目中的代码的问题。
React.UseContext或useContext钩子似乎适合我的情况，但是我不完全理解这个钩子的语法/方法。
我的项目正在慢慢地开始增长，一些函数或变量必须跨3个或更多组件拖动，才能在一个地方使用它：

应用程序js

const [costs, setCosts] = useState(null);
const deleteCostHandler = (itemId) => {
    setCosts((prevCosts) => {
      let res = prevCosts.filter((cost) => cost.id !== itemId);
      return [...res];
    });
  };
//jsx..
 <ConstContext.Provider><Cost value={{deleteCostHandler}} /></ConstContext.Provider>

成本. js

const costDeleteHandler = (incomeId) => {
    props.dataDelete(incomeId);
};
 <CostList costDelete={costDeleteHandler} />

成本清单. js

const passDataForUpdateHandler = (deletedId) => {
    props.costDelete(deletedId);
};
<CostItem refreshAfterDelete={passDataForUpdateHandler} />

最后..

成本项目. js

const onDeleteHandler = () => {
    fetch("http://localhost:8000/costs/" + props.id, {
      method: "DELETE",
    }).then(() => {
      props.refreshAfterDelete(props.id);
      props.clearInputs(true);
    });
  };
 <button type="button" onClick={onDeleteHandler}>

我尝试创建Context.js文件并存储所需的功能，以削减代码并使用它，如：ctx.deleteCostHandler（props.id）;，但我得到错误“deleteCostHandler不是函数”，所以我显然做错了什么。如果有人能解释/指导我正确的解决方案，我将不胜感激。