React : how to call a function as a state object value?

I have a page which contains widgets, each widget contains data and settings used to display the data. When a widget's button is clicked, a sidebar opens (the sidebar component is a child of the page, sibling of the widgets). Within this sidebar, inputs allow to edit the clicked widget data and settings.

What I did to achieve this : I created a state in the parent to both the sidebar and the widgets, when a widget is clicked, this state is setted to contain both the data needed by the sidebar and a callback function to edit them.

What is wrong : The sidebar displays the data from the widget as it should but it does not call the callback function when data is modified.

Here's the code inside the widget component :

(...)
  const updatingInformations = (data, settings, config) => {
    console.log("updating informations : ", data, settings, config);
    data && setWidgetData(data);
    settings && setWidgetSettings(settings);
    config && setWidgetConfig(config);
  };
(...)
<button
          onClick={(e)=>{
            e.preventDefault();
            setSidebarContent({
              type: "widget",
              widget: widget,
              informations: {
                data: widgetData,
                config: widgetConfig,
                settings: widgetSettings,
              },
              callback: updatingInformations,
            });
          }}
          />
(...)

Inside the sidebar component :

(...)
const updatingWidget = (path, newValue) => {
    let stockInfo = { ...sidebarContent.informations };
    stockInfo[path[0]][path[1]][path[2]][path[3]] = newValue;
    console.log(
      "updating widget : ",
      sidebarContent,
      stockInfo[path[0]][path[1]][path[2]][path[3]],
    );
    sidebarContent.callback(null, stockInfo.settings, null);
  };

When the action is triggered (after editing an input), updatingWidget() is called as shown by its console.log() but updatingInformations() isn't called.

What is wrong with my code ?