[React] Cambio default value in select dentro Modal

[fermat]

ciao!

dentro ad un bootrsap modal in una app react, faccio questo:

import * as React from "react";

export default class UpdateModal extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            authors: [],
            editors: [],
            show: false,
            cTitolo: '',
            cPrezzo: '',
            cIsbn: '',
            cNote: '',
            selectedAu: '*',
            selectedEd: '*'
        };

        this.handleSaveBtnClick = this.handleSaveBtnClick.bind(this);
        this.caricato = this.caricato.bind(this);
    }

    async caricato() {
        await axios.get(AUTHORS_ALL)
            .then(res => {
                this.setState({
                    authors: res.data.authors
                });
            });

        await axios.get(EDITORS_ALL)
            .then(res => {
                this.setState({
                    editors: res.data.editors
                });
            });

        await this.setState({
            cTitolo: this.props.currentBook.title,
            cPrezzo: this.props.currentBook.price,
            cIsbn: this.props.currentBook.isbn,
            cNote: this.props.currentBook.note,
            selectedAu: this.props.currentBook.author_id,
            selectedEd: this.props.currentBook.editor_id
        });
        console.log(this.state.selectedAu);
    }

    render() {
        return (
            <Modal show={this.props.showModal} onEntered={this.caricato} onEscapeKeyDown={this.props.onClose}>
                <Modal.Body>
                    <div className="form-group">
                        <label htmlFor="add_titolo">Titolo</label>
                        <input type="text" className="form-control" id="add_titolo"
                               placeholder="Titolo" name="titolo" defaultValue={this.state.cTitolo}/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="add_au">Autore</label>
                        <select className="custom-select" id="add_au" defaultValue={this.state.selectedAu}>
                            <option key={0} value="*">{"*"}</option>
                            {
                                this.state.authors.map(au => (<option key={au.id} value={au.id}>{au.name}</option>))
                            }
                        </select>
                    </div>
            </Modal>
        );
    }
}

quando avvio il modal passo un oggetto dal parent.
la input text viene correttamente valorizzata, mentre la select si riempie, ma non cambia valore.
nel console.log compare il valore giusto, quindi lo state viene correttamente cambiato.
non so come fare per dirgli di spostare la voce della select.

[fermat]

per il momento ho trovato questa soluzione:

async caricato() {
    await axios.get(AUTHORS_ALL)
        .then(res => {
            this.setState({
                authors: res.data.authors
            });
        }).then(function () {

        });

    await axios.get(EDITORS_ALL)
        .then(res => {
            this.setState({
                editors: res.data.editors
            });
        });

    await this.setState({
        cTitolo: this.props.currentBook.title,
        cPrezzo: this.props.currentBook.price,
        cIsbn: this.props.currentBook.isbn,
        cNote: this.props.currentBook.note,
        selectedAu: this.props.currentBook.author_id,
        selectedEd: this.props.currentBook.editor_id
    });

    document.getElementById("add_au").value = this.state.selectedAu;
    document.getElementById("add_ed").value = this.state.selectedEd;
}

probabilmente non è la migliore in ambito react, ma funziona.
si accettano suggerimenti ovviamente!