Cannot add property 0, the object is not extensible in react.js

When I try to select a checkbox, it shows the error ‘Cannot add property 0, the object is not extensible,’ and I’m unable to add items properly. Can someone please help me with this?

  const [formData, setFormData] = useState<RoleFormData>({
    name: "",
    permissions: [],
  });

  useEffect(() => {
    if (addRole) {
      setFormData({
        name: addRole.name,
        permissions: addRole.permissions,
      });
    }
  }, []);

handling the checkbox

  const handleCheckboxChange = (
    permissionId: number,
    section: string,
    checkedValues: CheckboxValueType[]
  ) => {
    const updatedFormData = { ...formData };

    const permission = updatedFormData.permissions.find(
      per => per.permissionId === permissionId && per.section === section
    );

    if (permission) {
      permission.name =
        checkedValues.length > 0 ? String(checkedValues[0]) : "";
    } else {
      updatedFormData.permissions.push({
        permissionId,
        section,
        name: checkedValues.length > 0 ? String(checkedValues[0]) : "",
      });
    }

    setFormData(updatedFormData);
  };

rendering the checkbox dynamically and trying to update on form data

        {Object.keys(permissionList).map(sectionKey => (
          <Collapsible
            title={permissionList[sectionKey][0]?.section}
            isFirst={false}
            key={sectionKey}
          >
            {permissionList[sectionKey]?.map((item, index) => (
              <Checkbox.Group
                options={[
                  {
                    label: item.name.toLowerCase(),
                    value: item.name.toLowerCase(),
                  },
                ]}
                key={index}
                value={formData.permissions
                  .filter(
                    per =>
                      per.section.toLowerCase() === item.section.toLowerCase()
                  )
                  .flatMap(per => per.name.toLowerCase())}
                onChange={checkedValues =>
                  handleCheckboxChange(
                    item.permissionId,
                    item.section.toLowerCase(),
                    checkedValues
                  )
                }
              />
            ))}
          </Collapsible>

This is initial State in redux

const initialState: IRoles = {
  rolesList: [],
  permissionList: [],
  permissionsBySection: {} as PermissionsBySection,
  addRole: {
    roleId: 0,
    name: "",
    permissions: [],
  },
  error: null,
  loading: false,
};

This is Reducer

  reducers: {
    resetRolesItem: () => initialState,
    // updateAddCoupon: (state, action: PayloadAction<UpdateAddCoupon>) => ({
    //   ...state,
    //   addCoupon: {
    //     ...state.addCoupon,
    //     ...action.payload,
    //   },
    // }),
    updateAddRoles: (state, action: PayloadAction<UpdateAddRole>) => ({
      ...state,
      addRole: {
        ...state.addRole,
        ...action.payload,
      },
    }),
  },

ERROR
Cannot add property 0, object is not extensible
TypeError: Cannot add property 0, object is not extensible
at Array.push ()
at handleCheckboxChange (http://localhost:5173/src_pages_authorized_role_rolesDetail_index_tsx.d2f40c44ee046000e94a.hot-update.js:97:35)
at onChange (http://localhost:5173/src_pages_authorized_role_rolesDetail_index_tsx.d2f40c44ee046000e94a.hot-update.js:188:24)
at Object.toggleOption (http://localhost:5173/static/js/bundle.js:22699:57)
at InternalCheckbox.checkboxProps.onChange (http://localhost:5173/static/js/bundle.js:22561:23)
at handleChange (http://localhost:5173/static/js/bundle.js:59282:57)
at HTMLUnknownElement.callCallback (http://localhost:5173/static/js/bundle.js:88407:18)
at Object.invokeGuardedCallbackDev (http://localhost:5173/static/js/bundle.js:88451:20)
at invokeGuardedCallback (http://localhost:5173/static/js/bundle.js:88508:35)
at invokeGuardedCallbackAndCatchFirstError (http://localhost:5173/static/js/bundle.js:88522:29)