Как написать все эти три функции в родительском компоненте вместо записи в дочернем компоненте - ReactJS

Я в основном новичок в React. У меня есть страница панели инструментов, на которой я отображаю React Table. У меня есть кнопка настройки, которая открывает всплывающую страницу, на этой всплывающей странице есть несколько флажков, которые позволяют мне отображать / скрывать эти столбцы React. Первоначально для всех флажков на этой всплывающей странице установлено значение true. Когда я снимаю отметку с столбца, этот конкретный столбец отключается.

Теперь я написал несколько функций (3 основные функции) в дочернем компоненте. Для простоты приложения я хочу переместить эти 3 функции в родительский компонент.

Это мой дочерний компонент

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../../../actions';
import './CustomizedView.scss';
// import Filter from '../../common/filter/filter';
import ButtonComponent from '../../common/button/ButtonComponent';


class CustomizedViewInv extends Component {
  constructor(props) {
    super(props);
    this.handleCheckChildElement = this.handleCheckChildElement.bind(this);
    // this.applyFilter = this.applyFilter.bind(this);
    this.resetFilter = this.resetFilter.bind(this);
    this.state = {
      items: this.props.items,
    };
  }

  getCheckBox(item) {
    return (
      <div>
        <input
          value = {item.id}
          // className='chkProd'
          type='checkbox'
          checked = {item.isChecked}
          //disabled = {d.poId !== null || d.status !== 'Responded'}
          onClick = {(e) => { this.handleCheckChildElement(e); }}
        />
        {item.value}
      </div>);
  }

  handleCheckChildElement(event) {
    const { items } = this.state;
    for (let i = 0; i < items.length; i = i + 1) {
      if (items[i].id === +event.target.value) {
        items[i].isChecked = !items[i].isChecked;
        break;
      }
    }
    this.setState({ items });
  }

  resetFilter() {
    const { items } = this.state;
    for (let i = 0; i < items.length; i = i + 1) {
      items[i].isChecked = true;
    }
    this.setState({ items });
    console.info('Reset filter : > Items : ' + JSON.stringify(items));
  }

  render() {
    const { items } = this.state;
    return (
      <div className='dashboardFilter-container' >
        <div className='bottomBar'>
          <ButtonComponent
            text='Apply'
            className='activeButton filterMargin-div'
            width='100'
            display='inline-block'
            // onClick = {() => { this.props.applyFilter(); }}
          />
          <ButtonComponent
            text='Reset'
            className='greyedButton clear-dashboard-filter'
            width='100'
            display='block'
            marginTop='60'
            onClick = {() => { this.resetFilter(); }}
          />
        </div>
        <div>
          <div className='data-points-text'>
            <span> Columns </span>
          </div>
          <div className = "App">
            {items.map((item) => {
                return this.getCheckBox(item);
            })}
          </div>
        </div>
      </div>
    );
  }
}

CustomizedViewInv.propTypes = {
  items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
};

CustomizedViewInv.defaultProps = {
};

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ActionCreators, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(CustomizedViewInv);

В моем родительском компоненте я импортировал дочерний компонент. Вы можете увидеть свойства, называемые элементами, в дочернем компоненте.

Bascilly в состоянии родительского компонента у меня есть объект с именем filterItems

filterItems: [
        { id: 1, value: 'Col 1', isChecked: true },
        { id: 2, value: 'Col 2', isChecked: true },
        { id: 3, value: 'Col 3', isChecked: true },
        { id: 4, value: 'Col 4', isChecked: true },
        { id: 5, value: 'Col 5', isChecked: true },
        { id: 6, value: 'Col 6', isChecked: true },
        { id: 7, value: 'Col 7', isChecked: true },
        { id: 8, value: 'Col 8', isChecked: true },
        { id: 9, value: 'Col 9', isChecked: true },
        { id: 10, value: 'Col 10', isChecked: true },
      ],
      isCustomizedOpen: false,

Теперь я в основном так зову Ребенка

{this.state.isCustomizedOpen &&
          <CustomizedViewInv
            items = {filterItems}
          />}

Пожалуйста, покажите мне, как переместить эти 3 функции - getCheckBox, handleCheckChildElement и resetFilter с дочерней страницы на родительскую.

Я в основном новичок в React. Поэтому, пожалуйста, помогите мне понять, какие изменения мне нужно изменить, чтобы переместить эти 3 функции - getCheckBox, handleCheckChildElement и resetFilter с дочерней страницы на родительскую.