Use antd's cascader dynamic load to click two sub-options to display?

I make a component that can dynamically load provincial, city, and county information. Oddly enough, I have to click the parent option twice before the child option is displayed. Click once the sub-option is not displayed, only a blank area is displayed.

//
subLocation = (parentId) => {
    let places = [];
    axios.get("/subLocation/" + parentId).then(response => {
        if (response.status === 200 && response.data !== "") {
            response.data.forEach((item) => {
                let tem = {};
                tem.value = item.value + "";
                tem.label = item.label;
                tem.isLeaf = item.isleaf;
                places.push(tem);
            })
        }
    }).catch(error => {
        console.error(error)
    });
    return places;
};

//
province = () => {
    let province = [];
    axios.get("/province").then(response => {
        if (response.status === 200 && response.data !== "") {
            response.data.forEach((item) => {
                let tem = {};
                tem.value = item.value + "";
                tem.label = item.label;
                tem.isLeaf = item.isleaf;
                province.push(tem);
            })
        }
    }).catch(error => {
        console.error(error)
    });
    return province;
}

//
import {Cascader} from "antd";
import React from "react"
import Options from "./Data"
const province = Options.province();
class Location extends React.Component {
    loadData = (selectedOptions) => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        let subLocation = Options.subLocation(targetOption.value);
        targetOption.children = subLocation;
        this.setState({
            locations: [...this.state.locations]
        });
    };

    constructor(props) {
        super(props);
        this.state = {
            locations: province
        };
    }

    render() {
        return (
            <Cascader
                options={this.state.locations}
                loadData={this.loadData}
            />
        );
    }
}
export default Location;

subLocation = async (parentId) => { let places = []; let response = await axios.get("/subLocation/" + parentId); if (response.status === 200 && response.data !== '') { response.data.forEach((item) => { let tem = {}; tem.value = item.value + ''; tem.label = item.label; tem.isLeaf = item.isleaf; places.push(tem); }) } return places; };