How to use the grommet-icons.FormDown function in grommet-icons

pad: { horizontal: 'small', vertical: 'xsmall' },
        background: {
          dark: 'dark-2',
          light: 'light-2'
        }
      },
      header: {
        border: { side: 'bottom', size: 'small' },
        pad: { horizontal: 'small', vertical: 'xsmall' },
        background: {
          dark: 'dark-1',
          light: 'light-1'
        }
      },
      icons: {
        ascending: _grommetIcons.FormDown,
        contract: _grommetIcons.FormUp,
        descending: _grommetIcons.FormUp,
        expand: _grommetIcons.FormDown
      },
      resize: {
        border: {
          side: 'right',
          color: {
            dark: 'border-dark',
            light: 'border-light'
          }
        }
      }
    },
    // drop: {
    //   maxHeight: undefined,

large: baseSpacing * 16 + 'px', // 384
          xlarge: baseSpacing * 32 + 'px', // 768
          full: '100%'
        }
      },
      text: {
        color: {
          dark: '#f8f8f8',
          light: textColor
        }
      }
    },
    accordion: {
      icons: {
        collapse: _grommetIcons.FormUp,
        expand: _grommetIcons.FormDown
        // color: { dark: undefined, light: undefined },
      }
    },
    anchor: {
      textDecoration: 'none',
      fontWeight: 600,
      color: {
        dark: '#6194EB',
        light: '#6194EB'
      }
    },
    button: {
      border: {
        // color: { dark: undefined, light: undefined }
        width: borderWidth + 'px',
        radius: baseSpacing * 0.75 + 'px'

light: 'light-2'
        }
      },
      header: {
        border: { side: 'bottom', size: 'small' },
        pad: { horizontal: 'small', vertical: 'xsmall' },
        background: {
          dark: 'dark-1',
          light: 'light-1'
        }
      },
      icons: {
        ascending: _grommetIcons.FormDown,
        contract: _grommetIcons.FormUp,
        descending: _grommetIcons.FormUp,
        expand: _grommetIcons.FormDown
      },
      resize: {
        border: {
          side: 'right',
          color: {
            dark: 'border-dark',
            light: 'border-light'
          }
        }
      }
    },
    // drop: {
    //   maxHeight: undefined,
    // },
    formField: {
      border: {

icon: {
      colors: colors
    },
    iconThemes: {},
    layer: {
      background: 'white',
      border: {
        radius: '4px'
      },
      overlay: {
        background: 'rgba(0, 0, 0, 0.5)'
      }
    },
    menu: {
      icons: {
        down: _grommetIcons.FormDown
      }
    },
    paragraph: {
      small: _extends({}, fontSizing(-1)),
      medium: _extends({}, fontSizing(0)),
      large: _extends({}, fontSizing(1)),
      xlarge: _extends({}, fontSizing(2))
    },
    radioButton: {
      check: {
        // color: { dark: undefined, light: undefined },
      },
      border: {
        color: {
          dark: 'rgba(255, 255, 255, 0.5)',
          light: 'rgba(0, 0, 0, 0.15)'

return _this4.setState({ open: false });
          },
          onOpen: function onOpen() {
            return _this4.setState({ open: true });
          },
          dropContent: _react2.default.createElement(_Calendar2.default, { date: date, onSelect: this.onSelect })
        },
        _react2.default.createElement(
          _Box2.default,
          { direction: 'row', gap: 'medium', align: 'center', pad: 'small' },
          _react2.default.createElement(
            _Text2.default,
            null,
            date ? new Date(date).toLocaleDateString() : 'Select date'
          ),
          _react2.default.createElement(_grommetIcons.FormDown, { color: 'brand' })
        )
      )
    );
  };