Child.js

import React from "react"
import { Checkbox } from "antd"

class CheckBox extends React.Component {
  render() {
    return <Checkbox checked={this.props.checked} />
  }
}

export default CheckBox

Parent.js

import React from "react"
import axios from "axios"
import Button from "../Button"
import CheckBox from "../CheckBox"

class Models extends React.Component {
  state = {
    models: [],
    selected: [],
    checked: false,
  }

  onChange = e => {
    this.setState({
      selected: [...this.state.selected, e],
    })
  }

  reset = e => {
    this.setState({ selected: [] })
    console.log("reset", this.state.selected)
  }
  async componentDidMount() {
    await axios.get("https://jsonplaceholder.typicode.com/users").then(res => {
      const models = res.data
      this.setState({ models: models })
    })
  }

  render() {
    const { models, selected } = this.state
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Model Name</th>
              <th>Timestamp</th>
              <th>Select</th>
            </tr>
          </thead>
          <tbody>
            {models.map(model => (
              <tr key={model.id}>
                <td>{model.name}</td>
                <td>{model.address.zipcode}</td>
                <td>
                  <CheckBox checked={this.state.checked} />
                  {/* <Checkbox
                    checked={this.state.checked}
                    onChange={() => this.onChange(model.id)}
                  /> */}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <Button name="Reset" classType="default" click={() => this.reset()} />
        <Button name="Compare" classType="primary" />
      </div>
    )
  }
}

export default Models