AntDesign 表单中的自定义输入字段 - “组件正在更改要控制的不受控制的输入。

问：

所以我喜欢使用 AntDesign 的表单，因为我喜欢它们的验证工作方式。但是，我想更改组件以使其更加个性化。所以我制作了我的组件，并用他们的组件替换了它。一切正常。我的价值观被它们的功能和一切所捕捉。但是，不知道为什么控制台对我生气并一直告诉我有一个不受控制的输入组件。InputCustomInputInputonFinish

A component is changing an uncontrolled input to be controlled. 
This is likely caused by the value changing from undefined to a defined value, which should not happen. 
Decide between using a controlled or uncontrolled input element for the lifetime of the component.

我很想忽略它，因为它的工作方式实际上没有任何问题。

代码如下：

const CustomInput = styled.input`
    background-color: #f5f5f5;
    border: 0.2px solid #d1d1d1;
    border-radius: 4px;
    padding: 8px 18px;
    width: 290px;
    font-family: "Mulish", sans-serif;
    font-weight: 300;
    font-size: 13pt;
    outline: none;
    transition: 0.3s ease-in-out;

    &:hover {
        background-color: #f2f2f2;
    }

    &::placeholder {
        color: #ababab;
        font-weight: 200;
    }
`;

const CustomeBtn = styled.button`
    background-color: #293651;
    color: #f7f5fb;
    padding: 8px 20px;
    outline: none;
    border: none;
    border-radius: 20px;
    font-family: "Mulish", sans-serif;
    font-size: 13pt;
    font-weight: 300;
    margin-right: 10px;
    transition: 0.3s ease-in-out;

    &:hover {
        background-color: #ffbb33;
        color: black;
    }
`;

const CustomLink = styled(Link)`
    font-family: "Mulish", sans-serif;
    font-size: 12pt;
    font-weight: 400;
    color: #293651;
    text-align: center;

    &:hover {
        color: #ffbb33;
    }
`;

function Login() {
    const onFinish = (values) => {
        console.log("Received values of form: ", values);
    };

    return (
        <MainContainer>
            <Heading>Login</Heading>
            <LoginIcon />
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: "Please input your Username!",
                        },
                    ]}
                >
                    ---------My custom input-----------
                    <CustomInput placeholder="Username" autoComplete='on'/>
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: "Please input your Password!",
                        },
                    ]}
                >
                    -----------My custom input-------------
                    <CustomInput type="password" placeholder="Password" autoComplete='on' />
                </Form.Item>

                <Form.Item>
                    <CustomeBtn htmlType="submit">Login</CustomeBtn>
                    Or <CustomLink to="/register">register now!</CustomLink>
                </Form.Item>
            </Form>
        </MainContainer>

奇怪的是，当我向输入字段添加属性时，它不会拾取它。就像我添加一样，它不会显示出来，它会让我正常输入字段......发生了什么valuevalue='this'