React - changing the result of changing data renderToStaticMarkup (), but without redrawing

I'm creating a React app that looks something like this:

I am using a Flux template, so I have a store that contains my data. The top-level pane queries the data, creates the appropriate child components, and passes a subset of the data down. This happens recursively, so I could nest these groups endlessly.

As you can see, it still works! I can click on the button to add a new country and I get a new line. I can click on a button to add a new UK city and I get a new line. However, when I click the button to add a new US city, nothing happens.

I see data changes.

The initial state:

{
  "planet": {
    "name": "Earth",
    "countries": [
      {
        "name": "United Kingdom",
        "cities": [
          {
            "name": "London"
          },
          {
            "name": "Birmingham"
          }
        ]
      },
      {
        "name": "United States of America"
      }
    ]
  }
}

      

        
        
        
      

    

After clicking the button to add a US city:

{
  "planet": {
    "name": "Earth",
    "countries": [
      {
        "name": "United Kingdom",
        "cities": [
          {
            "name": "London"
          },
          {
            "name": "Birmingham"
          }
        ]
      },
      {
        "name": "United States of America",
        "cities": [
          {

          }
        ]
      }
    ]
  }
}

      

        
        
        
      

    

I can even go as far as to verify that the actual markup generated as a result of React changes is calling the React.renderToStaticMarkup()

children.

Here is the US line markup before:

<div data="[object Object]" draggable="true" data-index="1" class="panel__group__row">
    <div class="panel__field"><label for="planet|countries|1|name">Name</label><input type="text" name="planet|countries|1|name" value="United States of America"></div>
    <div class="panel__group">
        <h4>Cities</h4>
        <div data="[object Object]" draggable="false" class="panel__group__row"><a href="">Add +</a></div>
    </div>
</div>

      

        
        
        
      

    

and after:

<div data="[object Object]" draggable="true" data-index="1" class="panel__group__row">
    <div class="panel__field"><label for="planet|countries|1|name">Name</label><input type="text" name="planet|countries|1|name" value="United States of America"></div>
    <div class="panel__group">
        <h4>Cities</h4>
        <div data="[object Object]" draggable="true" data-index="0" class="panel__group__row">
            <div class="panel__field"><label for="planet|countries|1|cities|0|name">Name</label><input type="text" name="planet|countries|1|cities|0|name"></div>
        </div>
        <div data="[object Object]" draggable="false" class="panel__group__row"><a href="">Add +</a></div>
    </div>
</div>

      

        
        
        
      

    

However, nothing is redrawn. Did I miss something?