I am use Cascader in antd 3.x like this:

<Row gutter={16} justify="start">
          <Col xs={24} sm={12} md={12} lg={12} xl={8} xxl={7}>
            <FormItem style={{ marginLeft:20,marginTop: 18,width:'100%'}} label="所属地区">
              {getFieldDecorator('orgArea', {
                initialValue: '',
                rules: [{ required: true,message:'所属地区必填' }],
              })(
                <this.LazyOptions/>
              )}
            </FormItem>
          </Col>
        </Row>

and this is the LazyOptions define:

LazyOptions = () => {
    const [options, setOptions] = React.useState(optionLists);
    const onChange = (value, selectedOptions) => {
      var unique = value.filter(this.onlyUnique);
      this.setState({
        formValues:{
          ...this.state.formValues,
          orgArea: unique.toString().replace(',','')
        }
      },()=>{
      });
    };
  
    const loadData = selectedOptions => {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
  
      // load options lazily
      setTimeout(() => {
        targetOption.loading = false;
        targetOption.children =regionDict.CITY[`${targetOption.label}`].map(function(itemc){
          return ({
            label: itemc,
            value: itemc,
          });
        });
        setOptions([...options]);
      }, 100);
    };
  
    return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect style={{ width: 220 }}/>;
  };

this problem is when I selected value in Cascader, the FormItem validator still tell me the value is null. how to make Cascader selected value visible in FormItem?