usePortRegistration = (inputs, outputs, onPortRegister) => {
  const { canvas, ports } = useContext(DiagramContext);

  return useCallback((portId, portElement) => {
    if (canvas && (inputs || outputs)) {
      if (ports && !ports[portId]) {
        onPortRegister(portId, portElement);
      }
    }
  }, [!!canvas, !!ports, inputs, outputs]);
}
Returns a callback that will perform the onPortRegister function when the context is ready (canvas exists)
and there's at least one input or one output