当我尝试npm启动使用React创建的Web组件时-一切正常。调用setState之后，下拉列表会正确更新

但是当我尝试将React Web组件集成到Angular项目中时-调用setState后它不会更新

我正在使用react-bootsrap，并且在设置State后不显示新选项。这是一个无法正常工作的示例

import React,{ Component } from 'react';
import { InputGroup,FormControl,Button,Form,Col,Row,DropdownButton,Dropdown } from 'react-bootstrap';

const CustomMenu = React.forwardRef(
    ({ children },ref) => {
        return (
            <>
                <FormControl
                    autoFocus

                />
                <ul classname="list-unstyled" style={{ marginTop: '10px',maxHeight: '150px',overflowY: 'scroll',marginBottom: '0px' }}>
                    {React.Children.toArray(children).map(child => child)}
                </ul>
            </>
        );
    },);


export default class ChargeReservationComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            reservations: [],feeType: null,governmentFee: null,isSubmitEnabled: false,customerName: null,selectedReservationId : null,selectedFeeType: null,taxableAmount: null,nonTaxableAmount:null,selectedGovernmentFee: null,remarks: null,}
      console.log(0);
    }

    UNSAFE_componentWillMount() {
        console.log(1);
        this.populateReservations();
    }

    componentDidUpdate(prevProps) {
        console.log('componentDidUpdate',prevProps);
    }

    handleSelectReservation(e) {
        this.setState({
            selectedReservationId: e.target.text,});
    }

    handleFormSubmit(e) {
        e.preventDefault();
        console.log(e.target);
    }

    populateReservations() {
        let reservations = [];
        let reservationList = [2321,2323,1233,1231321,12321];
        for (let idx = 0; idx < reservationList.length; idx++) {
          reservations.push(
            <Dropdown.Item key={reservationList[idx]} onClick={e => this.handleSelectReservation(e)}>
              {reservationList[idx]}
            </Dropdown.Item>,);
        }

        this.setState({
          reservations: reservations,});
    }

    render() {
        return (
            <div>
                <Form onSubmit={(e) => this.handleFormSubmit(e)} style={{ marginLeft: 10 }}>
                    <Row style={{ marginTop: 10 }}>
                        <Col md={3}>
                            <InputGroup>
                                <InputGroup.Prepend>
                                    <InputGroup.Text id="reservation-number">Reservation #</InputGroup.Text>
                                </InputGroup.Prepend>
                                <DropdownButton title={this.state.selectedReservationId ? this.state.selectedReservationId : ""} variant="secondary" as={InputGroup.Append}>
                                    <Dropdown.Menu as={CustomMenu}>
                                        {this.state.reservations}
                                    </Dropdown.Menu>
                                </DropdownButton>
                            </InputGroup>
                        </Col>
                    </Row>
                </Form>
            </div>
        );
    }
}