Why does input.onChange() in my form triggers AsyncValidation Error?

This is my search.jsx Component

const Search = ({
    input,
    isFetching,
    isSelected,
    message,
    options,
    handleSearch,
    handleChange,
    handleSave,
    handleCancel,
}) => (
    <Container>
        <StyledDropdown
            fluid
            selection
            placeholder="Search Name/Email"
            onChange={handleChange}
            onSearchChange={handleSearch}
            options={options}
            search={options => options}
            loading={isFetching}
            noResultsMessage={message}
            selectOnNavigation={false}
        />
        <Buttons>
            <Button type="button" content="Save" primary onClick={handleSave} disabled={!isSelected} />
            <Button type="button" content="Cancel" onClick={handleCancel} />
        </Buttons>
    </Container>
);```

This is my search container, The form throws an error[![enter image description here](https://i.sstatic.net/Z1HkAOmS.png)](https://i.sstatic.net/Z1HkAOmS.png)everytime I click Save and the HandleSave Function is triggered.

This is the handleSave method in the search.jsx container. The form Works fine if I remove the input.onChange() (but author_id is not added to the request payload since I removed that part, Obviously!)

handleSave = () => {
this.props.input.onChange(this.state.value); //-> throws function passed to reduxForm must return a promise
this.props.setSelected(this.getSelectedData());
this.props.toggleEditMode();
}“`

this is the parent container (author_selector.jsx) where search.jsx is called. Even here the input.onChange throws the same error!

class AuthorSelectorContainer extends Component {

    static propTypes = {
        isEditing: bool.isRequired,
        fetchAuthor: func.isRequired,
        setSelected: func.isRequired,
        ...
    };

    componentDidMount() {
        const {
            meta, input, fetchAuthor, setSelected, defaultUserData,
        } = this.props;

        if (meta.initial) {
            fetchAuthor(meta.initial);
        } else {
            setSelected(defaultUserData);
            //input.onChange(defaultUserData.id);  //-> throws function passed to reduxForm must return a promise
             
        }
    }

    render() {
        const { meta: { initial }, selected, isEditing } = this.props;
        const readOnly = (initial !== undefined);

        if (isEditing) {
            return <Search {...this.props} />;
        } else if (selected) {
            return <AuthorSelectorForm {...this.props} readOnly={readOnly} />;
        }
        return null;
    }
}


const mapStateToProps = state => ({
    selected: getSelected(state),
    isEditing: isEditing(state),
    defaultUserData: getUserData(state),
});

This is my middleware.js ( I can’t see why validation is triggered)

const apiMiddleware = store => next => async (action) => {
    const { type, payload } = action;
    const { getState, dispatch } = store;



    if (!type.startsWith('API/')) {
        return next(action);
    }

    const state = getState();
    const access_token = getToken(state);

    if (access_token && payload.url !== '/oauth/token') {
        payload.params = { access_token, ...payload.params };
    }

    const config = {
        baseURL: getBaseURL(state),
        ...payload,
    };

    // pass action to next middlewear. mostly for showing the dispatch on devTool
    next(action);

    try {
        const res = await axios(config);
        return res;

    } catch (error) {
        if (error.response) {
            if (error.response.status === 401) {
                // Unauthorized
                logout()(dispatch);
                dispatch(ui.flash.warn({ header: 'Login Expired', content: 'Please login again' }));
            }
        } else if (error.request) {
            dispatch(ui.flash.error({ header: 'Network Failure', content: 'API server not available' }));
        } else {
            // Something happened in setting up the request that triggered an Error
            dispatch(ui.flash.error({ header: 'Error', content: error.message }));
        }

        throw error;
    }
};

I have tried directly updating state without invoking reduxForm (which has some other issues!).

I have also tried bypassing validation which doesn’t work.

const AuthorSelectorForm = reduxForm({
    form: 'authorSelectorForm',
    validate: undefined,
    asyncValidate: undefined,
})(AuthorSelector);

I want to understand how input.onChange() can trigger async Validation error. How should I got about debugging this issue. Thank you for taking a look!