react-virtualized: Expand row (Update with force update)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
    <script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script>
   <script src="https://unpkg.com/immutable/dist/immutable.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/react-virtualized/styles.css">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div id="example">
      <!-- This element's contents will be replaced with your code... -->
    </div>
    <script src="script.js"></script>
  </body>

</html>

var List = ReactVirtualized.List;

// List data as an array of strings
var list = [
  'Brian Vaughn',
  'Bob Smith',
  'Someone Else',
  'I hate making up names'
  // And so on...
];

// a component that adds a button and when the button is clicked will add 
// some text or space that will increase the size of the item
class Expander extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isClicked: false
    };
  }

  renderMoreText() {
    if(this.state.isClicked) {
      return <div style={{backgroundColor: 'red', height: 200}}>long lorem ipsum </div>;
    }

    return null;
  }

  render() {
    return (
      <div>
          <button onClick={() => {this.setState({isClicked: true}, () => {this.props.onChanged();});}}> Expand more text </button>
          {this.renderMoreText()}
      </div>
    );
  }
}

class App extends React.Component {
  
  
  render() {
    const expander = (<Expander onChanged={() => this.refs.list.forceUpdate()}/>);
    
    return (
      <List
      ref="list"
    className="List"
    autoHeight
    width={300}
    height={400}
    rowCount={list.length}
    rowHeight={30}
    rowRenderer={
      ({ index, isScrolling, key, style }) => (
        <div
          className='Row'
          key={key}
          style={style}
        >
          {list[index]}
          {expander}
        </div>
      )
    }
  />
    );
  }
}


// Render your list
ReactDOM.render(
  <App />,
  document.getElementById('example')
);

.List {
  border: 1px solid black;
  box-sizing: border-box;
}
.Row {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  box-sizing: border-box;
}