Is there a way to stop mixing console.group()s when script use async functions?

When I debug a script that contains asynchronous functions and I want to have the statements grouped into a console group. The groups get mixed up and the whole debugging becomes confusing.

Is there any way to have the statements in the console better organized?

I prepared a simple example:

let C = class
{

    color;
    colorName;

    constructor ( color )
    {
        this.color = `font-weight: strong; color: ${ color }`;
        this.colorName = color;
        this.run();
    }

    async run () {
        console.groupCollapsed( '%c Class C ', this.color, this.colorName );
        console.log( '%c run', this.color );
        await this.asyncMethod();
        this.syncMethod();
        console.groupEnd();
    }

    async asyncMethod () {
        return new Promise( ( resolve ) => {
            setTimeout( () => {
                console.log( '%c asyncMethod', this.color, this.colorName );
                resolve();
            }, 99 );
        } );
    }

    syncMethod ()
    {
        console.group( '%c syncMethod', this.color, this.colorName );
        this.subSyncMethod();
        console.groupEnd();
    }

    subSyncMethod ()
    {
        console.log( '%c subSyncMethod', this.color, this.colorName );
    }

}

new C( 'red' );
new C( 'green' );

And the result is unfortunately this:

I need sometning nice like:

I would need to somehow separate the individual statements, even in the case of 2 class calls immediately after each other. Some console.something() command which i dont know or some custom function to delay console writing or sometnihg like that. Or some post-sort in console? It’s possible?