🐛 - fix: fix a bug where the field selection in the DataGrid componen…

…t was not updated when fields prop was updated

src/components/data/datagrid/datagrid.tsx

@@ -497,8 +497,24 @@ export const DataGridCaption: React.FC<DataGridCaptionProps> = ({
   onSelectAll,
 }) => {
   const [selectFieldsModalState, setSelectFieldsModalState] = useState(false);
+  const [selectFieldsActiveState, setSelectFieldsActiveState] = useState<
+    Record<string, boolean>
+  >({});
   const intl = useIntl();
 
+  // Create map mapping `field.name` to active state.
+  useEffect(() => {
+    setSelectFieldsActiveState(
+      fields.reduce(
+        (acc, field) => ({
+          ...acc,
+          [field.name]: field.active !== false,
+        }),
+        {},
+      ),
+    );
+  }, [fields]);
+
   const allSelected =
     selectedRows?.every((a) => renderableRows.includes(a)) &&
     renderableRows.every((a) => selectedRows.includes(a));
@@ -595,9 +611,16 @@ export const DataGridCaption: React.FC<DataGridCaptionProps> = ({
                     options: fields.map((f) => ({
                       label: field2Caption(f.name),
                       value: f.name,
-                      selected: f.active !== false,
+                      selected: Boolean(selectFieldsActiveState[f.name]),
                     })),
                     type: "checkbox",
+                    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+                      const name = e.target.value;
+                      setSelectFieldsActiveState({
+                        ...selectFieldsActiveState,
+                        [name]: !selectFieldsActiveState[name],
+                      });
+                    },
                   },
                 ]}
                 labelSubmit={ucFirst(_labelSaveFieldSelection)}

src/components/form/checkbox/checkboxgroup.tsx

@@ -26,7 +26,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
 
         return (
           <Checkbox
-            defaultChecked={option.selected}
+            checked={option.selected}
             id={checkboxId}
             key={option.value || option.label || index}
             name={name}