不能要求在 react-bootstrap 表单控件上输入

Question

我在 react-bootstrap 中有多步表单，无法让 required 在 react-bootstrap <Form.Control> 组件上工作。

多步形式的随机部分：

import React from 'react'
import { Form, Button } from 'react-bootstrap'
import FormItem from './formItem'

import '../../styles/contact.css'

const Names = ({ setForm, formData, navigation }) => {
    
    const { firstName, lastName, email } = formData
    const { next } = navigation

    return (
        <>
            <FormItem 
                label="First Name"
                name="firstName"
                controlId="formBasicInput"
                placeholder="First Name"
                value={firstName}
                onChange={setForm}
            />
            <FormItem 
                label="Last Name"
                name="lastName"
                controlId="formBasicInput"
                placeholder="Last Name"
                value={lastName}
                onChange={setForm}
            />
            <FormItem 
                label="Email"
                name="email"
                controlId="formBasicEmail"
                placeholder="Email"
                value={email}
                onChange={setForm}
            >
                <Form.Text className="text-muted">
                    We'll never share your email with anyone else.
                </Form.Text>
            </FormItem>
            <Button onClick={next}>Next</Button>
        </>
    )
}

export default Names

FormItem 组件的代码：

import React from 'react'
import { Form } from 'react-bootstrap'

const FormItem = ({ label, type = "text", placeholder, controlId, children, ...otherProps }) => (
    <Form.Group controlId={controlId}>
        <Form.Label>{label}</Form.Label>
        <Form.Control
            required
            type={type}
            placeholder={placeholder}
            {...otherProps}
        />
        {children}
    </Form.Group>
)

export default FormItem

如您所见，我在 FormItem 组件中的 Form.Control 上设置了 required。然而这行不通。我可以跳过浏览器中出现错误的输入字段。我也试过 required="true" 但它也不起作用。

很高兴得到任何提示。