在react js的单选组件中，当我单击一个单选按钮时，它正在选择表单中的其他单选按钮，但它传递了正确的值

Question

我有带有受控单选按钮组件的reactjs表单，但是当我单击一个单选按钮时，它正在选择表单中的另一个单选按钮，但它发送的是正确选择的按钮值，我不知道代码有什么问题，请您帮我一下。

这是单选按钮组件：

import React, {Component} from 'react';

const CheckboxOrRadioGroup = (props) => (
    <div className="form-group">
        <label className="form-label-radio">{props.title}</label>
        <div className="checkbox-group">
            <ul class="radioul">
            {props.options.map(opt => {
                return (
                  <li class="radioli" >

                        <input
                            id = {props.name}
                            name={props.name}
                            onChange={props.handleChange}
                            value={opt}
                            checked={ props.selectedOptions.indexOf(opt) > -1 }
                            type={props.type} /> <label for={opt} className="form-label-radio1" id={props.handleChange}>{opt}
                    </label>
                  </li>
                );
            })}
            </ul>
        </div>

    </div>
);

export default CheckboxOrRadioGroup;

这是表单元素和操作：

     <CheckboxOrRadioGroup
                    title={'Enter a  amount'}
                    name={'AMOUNT2'}
                     type={'radio'}
                    options={this.state.AMOUNT2Options}
                    selectedOptions = { this.state.newUser.AMOUNT2}
                    handleChange={this.handleRadioSelection}
                />

  handleRadioSelection(e) {
        let value = e.target.value;
        let name = e.target.name;
        this.setState( prevState => ({ newUser :
                {...prevState.newUser, AMOUNT2: value
                }
        }), () => console.log(this.state.newUser)

        )
}