Custom wrapper component using "asField" causes warning for Checkbox and Select

V 3.24.0

We use a wrapper component so we can easily update all forms on our site. While upgrading, I noticed the use of Checkbox and Select components causes a warning, “Check to make sure you have not registered two fields with the fieldName.” Here is a simplified version of what we have:

import {Form, asField, BasicText, Select, Checkbox} from 'informed';

export const MyInputWrapper = asField(props => {
  return <React.Fragment>
    {{
      'text': <BasicText {...props}/>,
      'select': <Select {...props}/>,
      'checkbox': <Checkbox {...props}/>
    }[props.type]}
  </React.Fragment>
});

function App() {
  return (
      <Form>
        {({}) => (
            <React.Fragment>
              <MyInputWrapper type="text" field="myText"/>
              <MyInputWrapper type="select" field="mySelect"/>
              <MyInputWrapper type="text" field="myText"/>
            </React.Fragment>
        )}
      </Form>
  );
}

export default App;

Is there something obvious I am doing wrong here? The form appears to work fine, but the warnings are filling up console.

[joepuzzo]

Happens to the best of us haha

[Luphrid]

I definitely need to spend some time refactoring. I have a lot of “just make it work” code hanging about in here.