showing select on check reactjs

I am trying to get a select to show/hide on check but the select just renders and does not disappear nor reappear. I am fairly new to react, so I am sure I am doing something wrong.

export default class TreeTest extends Component {
  constructor() {
    super();

    this.state = {
      checked: [
        '/grantSettingsPermissions/Admin',
        '/grantSettingsPermissions/ContentGroups/AddLocations', 
      ],
      expanded: [
        '/grantSettingsPermissions',
        '/grantSettingsPermissions/ContentGroups',
      ],
    };

    this.onCheck = this.onCheck.bind(this);
    this.onExpand = this.onExpand.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onCheck(checked) {
    console.log(checked);
    this.setState({
      checked,
    });
  }

  onExpand(expanded) {
    this.setState({
      expanded,
    });
  }

  handleChange() {
    this.setState({
      checked: !this.state.checked,
    });
  }

  render() {
    const { checked, expanded } = this.state;
    const content = this.state.checked
    ? <select>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
</select>
      : null;
    return (
            <div>
              { content }
              <CheckboxTree
                  checked={checked}
                  expanded={expanded}
                  nodes={nodes}
                  onCheck={this.onCheck}
                  onExpand={this.onExpand}
                  expandDisabled={true}
                  onChange={ this.handleChange }
              />
          </div>
    );
  }
}

I have a feeling I just need to add stuff to the onCheck function, but I am not entirely sure. Any help would be awesome!