Formik Storybook: Objects are not valid as a React child

Question

I am trying to add a storybook story for a TextFormField, the input field used in a form. I receive an error that reads Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

I have a simple story, I don't understand what could be causing this. The file for the TextFormField.tsx already existed and was being used throughout the application without issue. It was only when I added this story file that this error came up.

Story-

export default {
    title: 'Form/TextFormField',
    component: TextFormField,
    decorators: [withDesign, withFormik],
    parameters: {
        design: {
            type: 'figma',
            url: '#',
        },
        formik: {
            initialValues: {},
        },
    },
} as Meta;

const Template: Story<ComponentProps<typeof TextFormField>> = (args) => (
    <div style={{width: '200px'}}>
        <CustomThemeProvider>
            <TextFormField {...args} />
        </CustomThemeProvider>
    </div>
);

export const Default = Template.bind({});
Default.args = {
    type: 'default',
    placeholder: 'Text has been entered',
};

TextFormField.tsx -

type Props = {
    id?: string;
    type?: string;
    name?: string;
    label?: string;
    isDisabled?: boolean;
    maxLength?: number;
    isMultiline?: boolean;
    validate?: boolean;
    inputProps?: InputBaseComponentProps;
}

const TextFormField = ({ id, type, label, name, isDisabled, maxLength, isMultiline = false, validate }: Props): JSX.Element => {
    const classes = useStyles();
    return (
        <div className="TextFormField">
            {label && (
                <InputLabel htmlFor={name} className={classes.label}>
                    {label}
                </InputLabel>
            )}

            <Field
                component={TextField}
                name={name}
                type={type}
                variant="outlined"
                className={classes.textField}
                id={id}
                disabled={isDisabled}
                multiline={isMultiline}
                validate={validate}
                inputProps={{ 'data-testid': id, ...(maxLength ? { maxLength } : {}) }}
            />
        </div>
    );
};

export default TextFormField;

Answer 1

Add this to Default.args:

name: 'name'