How to correctly pass props to a custom component with Redux-form v6

Question

I am trying to update my form to redux-form v6.7 and I'm having difficulties wrapping my head about this part.

Say I want to render a select component like so :

 <div className="col-md-12">
     <Field name="name" component={renderSelect}/>
 </div>

Here is my component that was working fine with the previous versions of react-redux, obviously with a form prop named "name" :

<VirtualizedSelect
                {...domOnlyProps(name)}
                filterOptions={itemsFilter}
                options={this.state.items.items}
                onChange={name.onChange}
                value={name.value}
                name="name"
                placeholder="Name"
                onBlur={() => name.onBlur(name.value)}
                autoBlur={true}
                simpleValue={true}
                multi={true}
                clearable={false}
                onBlurResetsInput={false}
                onCloseResetsInput={false}
                delimiter="|"
                showNewOptionAtTop={false}
                selectComponent={Creatable}
                promptTextCreator={(label) => {return "Search for " + label}}

            />

So now I am trying to wrap this component in a renderSelect() function. But I am unsure how to correctly pass the props I need to the custom component. What props should I pass, which props are passed by default, etc.

const renderSelect = ({/*what to pass here?*/ input }) => (
    <FormGroup controlId="name" role="form" className="col-md-12">
        <div className="group selectW" style={{width: '100%'}}>
            <VirtualizedSelect
                {...domOnlyProps(name)}
                filterOptions={itemsFilter}
                options={this.state.items.items}
                onChange={name.onChange}
                value={name.value}
                name="name"
                placeholder="Name"
                onBlur={() => name.onBlur(name.value)}
                autoBlur={true}
                simpleValue={true}
                multi={true}
                clearable={false}
                onBlurResetsInput={false}
                onCloseResetsInput={false}
                delimiter="|"
                showNewOptionAtTop={false}
                selectComponent={Creatable}
                promptTextCreator={(label) => {return "Search for " + label}}

            />
        </div>
    </FormGroup>
);

Help appreciated.

Answer 1

I figured it out, posting what it looks like as it might help others at some point

const renderSelect = ({input, items, filter}) => (
    <FormGroup controlId="name" role="form" className="col-md-12">
        <div className="group selectW" style={{width: '100%'}}>
            <VirtualizedSelect

                filterOptions={filter}
                options={items}
                onChange={input.onChange}
                value={input.value}
                name={input.name}
                placeholder="Name"
                onBlur={() => input.onBlur(input.value)}
                autoBlur={true}
                simpleValue={true}
                multi={true}
                clearable={false}
                onBlurResetsInput={false}
                onCloseResetsInput={false}
                delimiter="|"
                showNewOptionAtTop={false}
                selectComponent={Creatable}
                promptTextCreator={(label) => {return "Search for " + label}}

            />
        </div>
    </FormGroup>
);