Multi-select with Select all Option in ANTD React

I have a form in which there is a multi select dropdown antd component . On change of the select all option , I need to select all the options available with max of 5 tags .

Please find the link of my code in codesandbox here https://codesandbox.io/s/summer-wind-1swto

Max tag of 5 is sepecified with handleSelectAll function is called on select of options

<Form.Item label= 'Column Names'>
                  {getFieldDecorator(`columnNames`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [
                      {
                        required: true,
                        message: "Please input the Column Names!",
                      },
                    ],
                  })(
                    <Select
                        mode="multiple"
                        placeholder="Please select Columns"
                        maxTagCount={5}
                        onChange={this.handleSelectAll}
                        >
                          <Option key="all" value="all">---SELECT ALL---</Option>
                        {children}
                        </Select>
                  )}
</Form.Item>

Expected:

On select all is clicked all the options to be selected
On unchecking it all options to be removed

In your case, setFieldsValue is not working. But you can use getValueFromEvent.

handleSelectAll = (value) => {
    if (value && value.length && value.includes("all")) {
        if (value.length === all.length + 1) {
            return [];
        }
        return [...all];
    }
    return value;    
}

<Form.Item label='Column Names'>
    {getFieldDecorator(`columnNames`, {
        validateTrigger: ['onChange', 'onBlur'],
        getValueFromEvent: this.handleSelectAll,
        rules: [
            {
                required: true,
                message: "Please input the Column Names!",
            },
        ],
    })(
        <Select
            mode="multiple"
            placeholder="Please select Columns"
            maxTagCount={5}
            onChange={this.handleSelectAll}
        >
            <Option key="all" value="all">---SELECT ALL---</Option>
            {children}
        </Select>
    )}
</Form.Item>

This will work. handleSelectAll event returns the value assigned using getValueFromEvent and initialized the select component.