How to use the @keystonejs/utils.countArrays function in @keystonejs/utils

onSave = async () => {
      const { item, validationErrors, validationWarnings } = this.state;

      // There are errors, no need to proceed - the entire save can be aborted.
      if (countArrays(validationErrors)) {
        return;
      }

      const {
        onUpdate,
        toastManager: { addToast },
        updateItem,
        item: initialData,
      } = this.props;

      const fieldsObject = this.getFieldsObject();

      const initialValues = getInitialValues(fieldsObject, initialData);
      const currentValues = getCurrentValues(fieldsObject, item);

      // Don't try to update anything that hasn't changed.

const fields = Object.values(omitBy(fieldsObject, path => !data.hasOwnProperty(path)));

      // On the first pass through, there wont be any warnings, so we go ahead
      // and check.
      // On the second pass through, there _may_ be warnings, and by this point
      // we know there are no errors (see the `validationErrors` check above),
      // if so, we let the user force the update through anyway and hence skip
      // this check.
      // Later, on every change, we reset the warnings, so we know if things
      // have changed since last time we checked.
      if (!countArrays(validationWarnings)) {
        const { errors, warnings } = await validateFields(fields, item, data);

        const totalErrors = countArrays(errors);
        const totalWarnings = countArrays(warnings);

        if (totalErrors + totalWarnings > 0) {
          const messages = [];
          if (totalErrors > 0) {
            messages.push(`${totalErrors} error${totalErrors > 1 ? 's' : ''}`);
          }
          if (totalWarnings > 0) {
            messages.push(`${totalWarnings} warning${totalWarnings > 1 ? 's' : ''}`);
          }

          addToast(`Validation failed: ${messages.join(' and ')}.`, {
            autoDismiss: true,
            appearance: errors.length ? 'error' : 'warning',
          });

          this.setState(() => ({

);

      const fields = Object.values(omitBy(fieldsObject, path => !data.hasOwnProperty(path)));

      // On the first pass through, there wont be any warnings, so we go ahead
      // and check.
      // On the second pass through, there _may_ be warnings, and by this point
      // we know there are no errors (see the `validationErrors` check above),
      // if so, we let the user force the update through anyway and hence skip
      // this check.
      // Later, on every change, we reset the warnings, so we know if things
      // have changed since last time we checked.
      if (!countArrays(validationWarnings)) {
        const { errors, warnings } = await validateFields(fields, item, data);

        const totalErrors = countArrays(errors);
        const totalWarnings = countArrays(warnings);

        if (totalErrors + totalWarnings > 0) {
          const messages = [];
          if (totalErrors > 0) {
            messages.push(`${totalErrors} error${totalErrors > 1 ? 's' : ''}`);
          }
          if (totalWarnings > 0) {
            messages.push(`${totalWarnings} warning${totalWarnings > 1 ? 's' : ''}`);
          }

          addToast(`Validation failed: ${messages.join(' and ')}.`, {
            autoDismiss: true,
            appearance: errors.length ? 'error' : 'warning',
          });

savedData[field.path],
                          onChange,
                        ]
                      );
                    }}
                  
                ))}
            
            <footer>
          

          {this.renderCreateModal()}
          {this.renderDeleteModal()}
        
      );
    }
  }</footer>

onUpdate = async () => {
    const { updateItem, isLoading, items } = this.props;
    const { item, selectedFields, validationErrors, validationWarnings } = this.state;
    if (isLoading) return;
    if (countArrays(validationErrors)) {
      return;
    }

    const data = arrayToObject(selectedFields, 'path', field => field.serialize(item));

    if (!countArrays(validationWarnings)) {
      const { errors, warnings } = await validateFields(selectedFields, item, data);

      if (countArrays(errors) + countArrays(warnings) > 0) {
        this.setState(() => ({
          validationErrors: errors,
          validationWarnings: warnings,
        }));

        return;
      }

render() {
    const { isLoading, isOpen, list } = this.props;
    const { item, validationErrors, validationWarnings } = this.state;

    const hasWarnings = countArrays(validationWarnings);
    const hasErrors = countArrays(validationErrors);

    const cypressId = 'create-item-modal-submit-button';

    return (

const { item, validationErrors, validationWarnings } = this.state;

    if (countArrays(validationErrors)) {
      return;
    }

    const creatable = fields
      .filter(({ isPrimaryKey }) => !isPrimaryKey)
      .filter(({ maybeAccess }) => !!maybeAccess.create);

    const data = arrayToObject(creatable, 'path', field => field.serialize(item));

    if (!countArrays(validationWarnings)) {
      const { errors, warnings } = await validateFields(creatable, item, data);

      if (countArrays(errors) + countArrays(warnings) > 0) {
        this.setState(() => ({
          validationErrors: errors,
          validationWarnings: warnings,
        }));

        return;
      }
    }

    createItem({
      variables: { data },
    }).then(data => {
      this.props.onCreate(data);
      this.setState({ item: this.props.list.getInitialItemData({}) });
    });
  };

onUpdate = async () => {
    const { updateItem, isLoading, items } = this.props;
    const { item, selectedFields, validationErrors, validationWarnings } = this.state;
    if (isLoading) return;
    if (countArrays(validationErrors)) {
      return;
    }

    const data = arrayToObject(selectedFields, 'path', field => field.serialize(item));

    if (!countArrays(validationWarnings)) {
      const { errors, warnings } = await validateFields(selectedFields, item, data);

      if (countArrays(errors) + countArrays(warnings) > 0) {
        this.setState(() => ({
          validationErrors: errors,
          validationWarnings: warnings,
        }));

        return;
      }
    }

    updateItem({
      variables: {
        data: items.map(id => ({ id, data })),
      },

render() {
    const { isLoading, isOpen, items, list } = this.props;
    const { item, selectedFields, validationErrors, validationWarnings } = this.state;
    const options = this.getOptions();

    const hasWarnings = countArrays(validationWarnings);
    const hasErrors = countArrays(validationErrors);

    return (

onUpdate = async () => {
    const { updateItem, isLoading, items } = this.props;
    const { item, selectedFields, validationErrors, validationWarnings } = this.state;
    if (isLoading) return;
    if (countArrays(validationErrors)) {
      return;
    }

    const data = arrayToObject(selectedFields, 'path', field => field.serialize(item));

    if (!countArrays(validationWarnings)) {
      const { errors, warnings } = await validateFields(selectedFields, item, data);

      if (countArrays(errors) + countArrays(warnings) > 0) {
        this.setState(() => ({
          validationErrors: errors,
          validationWarnings: warnings,
        }));

        return;
      }
    }

    updateItem({
      variables: {
        data: items.map(id => ({ id, data })),
      },
    }).then(() => {
      this.props.onUpdate();
      this.resetState();