Loading .css file from inside a component in React

I have a component that determines the location of the desired .css file via an ajax call in componentDidMount(), that I want to then load before render. I've tried just adding a <link> element in the render return (didnt work), I've also tried directly injecting the tag into the head using vanilla JS, but this also didnt work:

async componentDidMount() {
    await this.fetchPanelInfo().then(result => {
        console.log(this.state);

        const link = document.createElement("link");
        link.href= this.state.stylePath;
        link.rel = "stylesheet";
        link.type="text/css";
        document.head.appendChild(link);
        //const style = document.getElementById("style-direction");
        //style.href = this.state.stylePath;
    })
}

The shortened component:

class Panel extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        token: "f0be0f7d231305a832fd1eef4bcb0e9ba18f2d65",
        error: null,
        errmsg: null,

        menuContent: null,
        stylePath: null,
        services: null,

        loading: true
    }
    isLoggedIn().then(logged => {
        //Nothing for now
    })
}
//Gets all information about the panel
async fetchPanelInfo() {
    await axios({
        method: 'post',
        url: `${ENDPOINT}`,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        data: this.state
    }).then(result => {
        console.log(result.data);
        this.setState({
            error: result.data.error,
            menuContent: result.data.menu,
            stylePath: result.data.stylePath,
            services: result.data.services,
            loading: false
        });
    }).catch(err => {
        console.log("error");
        console.log(err);
        this.setState({error: err.error})
    });
}

async componentDidMount() {
    await this.fetchPanelInfo().then(result => {
        console.log(this.state);

        const link = document.createElement("link");
        link.href= this.state.stylePath;
        link.rel = "stylesheet";
        link.type="text/css";
        document.head.appendChild(link);
        //const style = document.getElementById("style-direction");
        //style.href = this.state.stylePath;
    })
}

render() {
    if(this.state.loading) return null;
    return (
        <section className="panel">

            <p>Hello</p>
            <Menu items={this.state.menuContent} />
        </section>
    );
}
}

This is a page that <Router> navigates to, so I cant explicitly pre-fetch the name of the stylesheet and import separately, because the stylesheet loaded depends on the supplied token (i.e., it varies from token to token).

Any ideas?