我已经使用TypeScript编写了一些React代码，它利用了来自Redux的useCallback钩子和dispatch函数。不幸的是，代码导致无限循环，我不知道如何修复它。
下面是我的代码：

const onSelect = useCallback(
  (
    event: React.SyntheticEvent<HTMLDivElement, Event>,
    property: keyof OperationsDefinition
  ) => {
    const customEvent = event as unknown as CustomEvent;
    const options = customEvent.detail.options;
    const value = options.length ? options[0].id : "";

    dispatch(
      setEditedElement({
        ...(editedElement as Element),
        [property]: value,
      })
    );
  },
  [editedElement?.hierarchyScopeId]
);

电话：

{data && editedElement && (
  <DropdownHierarchy
    onSelect={(event) => {
      onSelect(event, "hierarchyScopeId");
    }}
    search
    configuration={{
      data,
      selectedElementsIds: [
        editedElement.hierarchyScopeId,
      ],
    }}
  />
)}

DropdownHierarchy是外部组件，我无法编辑它。
当我调用onSelect函数（该函数被传递给DropdownHierarchy组件）时，代码福尔斯无限循环，并一直调用onSelect和重新呈现。问题似乎是由于使用了调度函数，但我不确定如何修复它。
有人能帮我诊断这个问题并提出解决方案吗？