Javascript 福米克挂钩“；useField“；抛出错误，指出该组件不是React函数组件

我正在尝试在React v16.12.0和formik版本2.1.2中创建一个可重用的输入组件。下面是输入组件的代码

import React from 'react';
import { useField, Form, Formik } from 'formik';

const input = ({label, ...props}) => {
    const [field, meta, helpers] = useField(props);
    return (
        <div>
            <label>
                {label}
            </label>
            <input {...field} {...props} />

        </div>
    )
}

export default input;

从“React”导入React；
从'Formik'导入{useField，Form，Formik}；
常量输入=（{label，…props}）=>{
const[field，meta，helpers]=useField（props）；
返回(
{label}
)
}
导出默认输入；

当我试图将这个组件集成到任何形式中时，它会给我以下错误。集成代码如下所示：

<Formik initialValues={{
            firstName: '',
            lastName:''
        }}
        onSubmit={(data) => {

            console.log(data)
        }}>
            {({values, isSubmitting})=>(
                <Form>
                    <Input label="hello" name="firstName" />
                    <button type="submit">Submit</button>
                    <pre>
                        {JSON.stringify(values)}
                    </pre>
                </Form>
            )
            }
        </Formik>

{
console.log（数据）
}}>
{（{values，isSubmitting}）=>(
提交
{JSON.stringify（值）}
)
}

React组件必须在中命名

错误是因为您没有遵循react组件的正确命名约定。任何组件，无论是功能组件还是类组件，都应该用PascalCase命名。尝试重命名输入组件定义，如下所示：

从“React”导入React；
从'Formik'导入{useField，Form，Formik}；
//“输入”不是“输入”
常量输入=（{label，…props}）=>{
const[field，meta，helpers]=useField（props）；
返回(
{label}
)
}
导出默认输入；//是。感谢您的快速响应
import React from 'react';
import { useField, Form, Formik } from 'formik';

//  'Input' not 'input"
const Input = ({label, ...props}) => {
    const [field, meta, helpers] = useField(props);
    return (
        <div>
            <label>
                {label}
            </label>
            <input {...field} {...props} />

        </div>
    )
}

export default Input; // <---  'Input' not 'input"