Reactjs 为什么可以'；我不能勾选Formik复选框吗？

我正在尝试创建一个简单的Formik表单。第一次使用复选框。我可以渲染复选框，但无法选中任何复选框。有什么问题吗

export default function App() {


 var lights = [{id:1, name:"a"}, {id:2, name:"a"}]
  return (<div>
    <h1>Select Lights</h1>
    <Formik
        initialValues={{
            checked: [],
        }}
        onSubmit={(eve) => this.submit(eve)}
    >
        {({values}) => (
            <form>
                
                <div id="checkbox-group">Checked</div>
                <div role="group" aria-labelledby="checkbox-group">
                    {lights.map((light) =>
                        <div>
                            <label>
                                <Field type="checkbox" key={light.id} name="checked" value={light.id}/>
                                {light.name}
                            </label>
                        </div>
                    )}
                </div>

                <button type="submit" onClick={(event => this.submit(event))}>Submit</button>
            </form>
        )}
    </Formik>
    </div>)
}

导出默认函数App（）{
var-lights=[{id:1，名称：“a”}，{id:2，名称：“a”}]
返回(
选择灯光
这个。提交（eve）}
>
{（{values}）=>(
选中的
{lights.map（（灯光）=>
{light.name}
)}
this.submit（event））}>submit
)}
)
}

复选框值是一个数字似乎是问题所在。因为您将其初始化为一个数字，但在formik跟踪复选框值时，它在内部被转换为字符串。改变

<Field type="checkbox" key={light.id} name="checked" value={light.id}/>

致：

<Field type="checkbox" key={light.id} name="checked" value={light.id.toString()}/>