On search and select the checkbox it does not include previous checked values in react js

Please find my code in the link https://codesandbox.io/s/jolly-kapitsa-vhv2l . There is a search bar , on search for A and check A . Again searching for B and checking B im getting only the latest checked value B and value A is not added to it . But without searching both "A" and "B" are added to the checked values on checking it individually .

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Checkbox, Row, Col, Tooltip, Input } from "antd";
const { Search } = Input;
const metricCols = [
  {
    title: "A",
    columnDescription: "A desc",
    columnName: "a"
  },
  {
    title: "B",
    columnDescription: "B desc",
    columnName: "b"
  },
  {
    title: "C",
    columnDescription: "C desc",
    columnName: "c"
  },
  {
    title: "D",
    columnDescription: "D desc",
    columnName: "d"
  },
  {
    title: "E",
    columnDescription: "E desc",
    columnName: "e"
  }
];

class App extends React.Component {
  state = {
    visible: false,
    items: [],
    selected: [],
    fuzzySearcher: null,
    metricItems: [],
    inputText: ""
  };
  onChange = checkedValues => {
    console.log("checked = ", checkedValues);
    this.setState({ metricItems: checkedValues });
  };
  onMetricsChange = checkedValues => {
    console.log("The checkedValues logged here", checkedValues);
    this.setState({ metricItems: checkedValues });
  };
  handleChangeMetrics = e => {
    this.setState({ inputText: e.target.value });
  };
  render() {
    const { inputText, metricItems } = this.state;
    const filteredMetricItems =
      metricCols.length > 1 &&
      metricCols.filter(item =>
        item["title"].toLowerCase().includes(inputText.toLowerCase())
      );
    return (
      <React.Fragment>
        <Search
          className="search-metrics"
          allowClear={true}
          placeholder="Search Metrics"
          onChange={this.handleChangeMetrics}
        />
        <Checkbox.Group
          defaultValue={metricItems}
          style=
          onChange={this.onMetricsChange}
        >
          {filteredMetricItems &&
            filteredMetricItems.map(el => (
              <Col span={24} key={el.columnName}>
                <div
                  className="draggable-segment"
                  key={`source-${el.columnName}`}
                >
                  <Tooltip key={el.columnName} title={el.columnDescription}>
                    <Checkbox
                      style=
                      value={el.columnName}
                      key={el.columnName}
                    >
                      {el.title}
                    </Checkbox>
                  </Tooltip>
                </div>
              </Col>
            ))}
        </Checkbox.Group>
      </React.Fragment>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("container"));