Fix items are not updated when using mass editor

frontend/src/components/header/Button.tsx

@@ -6,7 +6,6 @@ import React, {
   MouseEvent,
   PropsWithChildren,
   useCallback,
-  useRef,
   useState,
 } from "react";
 import { Button } from "react-bootstrap";
@@ -59,16 +58,13 @@ export function ContentHeaderAsyncButton<T extends () => Promise<any>>(
 
   const [updating, setUpdate] = useState(false);
 
-  const promiseRef = useRef(promise);
-  const successRef = useRef(onSuccess);
-
   const click = useCallback(() => {
     setUpdate(true);
-    promiseRef.current().then((val) => {
+    promise().then((val) => {
       setUpdate(false);
-      successRef.current && successRef.current(val);
+      onSuccess && onSuccess(val);
     });
-  }, [successRef, promiseRef]);
+  }, [onSuccess, promise]);
 
   return (
     <ContentHeaderButton

frontend/src/components/inputs/Chips.tsx

@@ -26,17 +26,15 @@ export const Chips: FunctionComponent<ChipsProps> = ({
 
   const input = useRef<HTMLInputElement>(null);
 
-  const changeRef = useRef(onChange);
-
   const addChip = useCallback(
     (value: string) => {
       setChips((cp) => {
         const newChips = [...cp, value];
-        changeRef.current && changeRef.current(newChips);
+        onChange && onChange(newChips);
         return newChips;
       });
     },
-    [changeRef]
+    [onChange]
   );
 
   const removeChip = useCallback(
@@ -46,14 +44,14 @@ export const Chips: FunctionComponent<ChipsProps> = ({
         if (index !== -1) {
           const newChips = [...cp];
           newChips.splice(index, 1);
-          changeRef.current && changeRef.current(newChips);
+          onChange && onChange(newChips);
           return newChips;
         } else {
           return cp;
         }
       });
     },
-    [changeRef]
+    [onChange]
   );
 
   const clearInput = useCallback(() => {