Обязательное поле не работает для динамически сгенерированного переключателя в React

Question

const ExpenseForm = (props) => {
  const [selectedRadio, setSelectedRadio] = useState('')

  const handleSelectedRadio = (event) => setSelectedRadio(event.target.value) 

  const handleRadio = (event) => {
    props.handleRadio(event)
    handleSelectedRadio(event)
  }

return (

<Form onSubmit={props.addExpenseToInfoCard}>
  <Form.Control onChange={props.handleAmount} placeholder="Amount" required/>
  <Row>By whom</Row> 
  <Row>
  {
    props.members.map((member,index) => {
      return (
        <Col key={index}>
           <Form.Check type="radio" checked={selectedRadio === member.name} value={member.name || ''}
               label={member.name} onChange={(event) => handleRadio(event)} required/>
        </Col>
             )
        })
    }
  </Row>
  <Row>To whom</Row>
  <Row>
  {
    props.to_whom.map((member,index) => {
      return (
         <Col key={index}>
            <Form.Check type="checkbox" label={member.name} checked={member.isChecked} value={member.name || ''}
             onChange={(event) => props.handleCheckbox(event, index)} />
         </Col>
             )
        })
  }
 </Row>
 <center>
    <i className="material-icons" onClick={(event) => props.addExpenseModal(event)}>add_circle</i>
 </center>
 <center><Button title="add the expenses" type="submit">Add the expenses</Button></center>
</Form>
)
}

export default ExpenseForm

В компоненте ExpenseForm я динамически сгенерировал radio buttons с помощью функции карты массива . Все работает нормально. Но обязательное поле HTML 5 для этих переключателей не работает. Это позволяет мне отправить форму с пустыми значениями, даже если я добавил поле required.