Update through React.render gives strange results

Question

I'm writing a web app using React, and due to the way a UI framework works I need to use multiple React components mounted to divs in thew Html. To update these divs I call React.render again to update the different components.

This works really well on my own machine, but as soon as I deploy a minimized version on the location http://svdoever.github.io/trainercoach I get strange behaviour.

Reproduction steps:

1. Navigate to http://svdoever.github.io/trainercoach
2. Click the hamburger menu
3. Select an item in the menu (opens up an exercises set)
4. At the bottom press the ">" next button
5. A reload of the app seems to occur

The initial rendered HTML is:

After selecting the ">" next button which calls renderExercise(), there seems to be a kind of "reload" of the whole app within a new generated div:

The new introduced div is:

<div data-title="http://svdoever.github.io/trainercoach/" id="1452577160" class="panel active" data-crc="1452577160" style="z-index: 10;">

And this div contains all kind of stuff from the whole rendered page, like tag that are defined in the tag.

React sees this as a mismatching server-side rendering and comes with the error:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) <ul class="list ins (server) <ul class="list ins

In my opinion there should only be an update, no introduction of a new div.

The relevant code:

    function renderIndex(source) {
        var context = { rootUri: source.substring(0, source.lastIndexOf( "/" )) };
        $.get(source + "?v=" + Math.random().toString(), function (indexMarkdown) {
            $.afui.hideMask();
            var indexManager =  new IndexManager(source, indexMarkdown, this.rootUri);
            React.render(<Index key="index" indexManager={indexManager}/>, document.getElementById('mountIndexLeftMenu'));
        }.bind(context));
    }

    function renderExercises(source) {
        var context = { rootUri: source.substring(0, source.lastIndexOf( "/" )) };
        $.get(source + "?v=" + Math.random().toString(), function (exercisesMarkdown) {
            $.afui.hideMask();
            var exerciseManager =  new ExerciseManager(source, exercisesMarkdown, this.rootUri);
            renderExercise(exerciseManager);
        }.bind(context));
    }

    function renderExercise(exerciseManager) {
        React.render(<ExercisesHeader key="exerciseHeader" exerciseManager={exerciseManager}/>, document.getElementById('mountAppHeader'));
        React.render(<Exercises key="exercises" exerciseManager={exerciseManager}/>, document.getElementById('mountExercisesViewer'));
        React.render(<ExercisesController key="exercisesController" exerciseManager={exerciseManager}/>, document.getElementById('mountExercisesController'));
    }

    renderIndex("https://raw.githack.com/wiki/svdoever/trainercoach/indexhotyoga.md");

Strange thing is that this behaviour only occurs on my minified project.