setState之后，Web组件内的react-bootstrap不会更新

Question

当我尝试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>
        );
    }
}