How to use the react-awesome-query-builder.BasicConfig.widgets function in react-awesome-query-builder

...BasicConfig.operators.between,
        valueLabels: [
            'Value from',
            'Value to'
        ],
        textSeparators: [
            'from',
            'to'
        ],
    },
    proximity,
};


const widgets: Widgets = {
    ...BasicConfig.widgets,
    // examples of  overriding
    text: {
        ...BasicConfig.widgets.text,
        validateValue: (val, fieldDef) => {
            return (val.length < 10);
        },
    },
    slider: {
        ...BasicConfig.widgets.slider,
        customProps: {
            width: '300px'
        }
    },
    rangeslider: {
        ...BasicConfig.widgets.rangeslider,
        customProps: {

...BasicConfig.operators.proximity.options,
            optionLabel: "Near", // label on top of "near" selectbox (for config.settings.showLabels==true)
            optionTextBefore: "Near", // label before "near" selectbox (for config.settings.showLabels==false)
            optionPlaceholder: "Select words between", // placeholder for "near" selectbox
            minProximity: 2,
            maxProximity: 10,
            defaults: {
                proximity: 2
            },
            customProps: {}
        }
    },
};

const widgets = {
    ...BasicConfig.widgets,
    // examples of  overriding
    text: {
        ...BasicConfig.widgets.text,
        validateValue: (val, fieldDef) => {
            return (val.length < 10);
        },
    },
    slider: {
        ...BasicConfig.widgets.slider,
        customProps: {
            width: '300px'
        }
    },
    rangeslider: {
        ...BasicConfig.widgets.rangeslider,
        customProps: {

...BasicConfig.widgets,
    // examples of  overriding
    text: {
        ...BasicConfig.widgets.text,
        validateValue: (val, fieldDef) => {
            return (val.length < 10);
        },
    },
    slider: {
        ...BasicConfig.widgets.slider,
        customProps: {
            width: '300px'
        }
    },
    rangeslider: {
        ...BasicConfig.widgets.rangeslider,
        customProps: {
            width: '300px'
        }
    },
    date: {
        ...BasicConfig.widgets.date,
        dateFormat: 'DD.MM.YYYY',
        valueFormat: 'YYYY-MM-DD',
    },
    time: {
        ...BasicConfig.widgets.time,
        timeFormat: 'HH:mm',
        valueFormat: 'HH:mm:ss',
    },
    datetime: {
        ...BasicConfig.widgets.datetime,

customProps: {
            width: '300px'
        },
    },
    date: {
        ...BasicConfig.widgets.date,
        dateFormat: 'DD.MM.YYYY',
        valueFormat: 'YYYY-MM-DD',
    },
    time: {
        ...BasicConfig.widgets.time,
        timeFormat: 'HH:mm',
        valueFormat: 'HH:mm:ss',
    },
    datetime: {
        ...BasicConfig.widgets.datetime,
        timeFormat: 'HH:mm',
        dateFormat: 'DD.MM.YYYY',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
    },
    func: {
        ...BasicConfig.widgets.func,
        customProps: {
            showSearch: true
        }
    },
};


const types: Types = {
    ...BasicConfig.types,
    // examples of  overriding