Must specify either a render prop, a render function as children, or a component prop to Field(auto)

I am getting error this while developing Auto complete using final-form

Must specify either a render prop, a render function as children, or a component prop to Field(auto)

I take help from this link https://trejgun.github.io/articles/bindings-for-using-final-form-with-material-ui-autocomplete/

But when I implemented above code I am getting above error

here is my code https://codesandbox.io/s/relaxed-breeze-hv58o

 <Field
              name="auto"
              multiple={true}
              component={AutoCompleteWrapper}
              placeholder="First Name"
              options={[{ label: "The Shawshank Redemption", values: 1994 }]}
            />

In your codesandbox, in test.js, you are exporting AutoCompleteWrapper as a named export:

export const AutoCompleteWrapper = props => {

But in your index.js file, you are importing it as the default:

import AutoCompleteWrapper from "./test";

So you can fix that in one of two ways:

Import the named export

import { AutoCompleteWrapper } from "./test";

Change your export to be the default

const AutoCompleteWrapper = props => {
  ...
};

export default AutoCompleteWrapper;