Пытаюсь передать функцию обратно в App.js и застреваю REACT

У меня есть приложение, которое позволяет мне добавлять список клиентов по входу. У меня также есть еще один компонент, который позволяет мне выбрать одного из существующих клиентов из выпадающего меню и создать с ним «новый урок». Таким образом, я могу регистрировать свои уроки, проведенные с моими клиентами. Все это работает отлично... вот тут я и застрял.

Каждый раз, когда я добавляю новый урок, я хочу взять продолжительность урока (в часах) и умножить ее на соответствующую цену клиента. Затем я хочу иметь возможность отображать эту прибыль, и каждый раз, когда я добавляю новый урок с новой прибылью, я хочу, чтобы все это складывалось в общую прибыль всех уроков.

Это App.js

import React, { Component } from 'react'
import Clients from './components/Clients'
import AddClient from './components/AddClient'
import NavBar from './components/NavBar'
import AddLesson from './components/AddLesson'
import CalculateIncome from './components/CalculateIncome'

class App extends Component {
  state = {
    clients : [
      // {id : null , name : '', price : null}
    ],
    lessons : [
      // {id: null, name: '', time: null, date :null}
    ],
  }

  deleteClient = (id) => {
    let clients = this.state.clients.filter(client => {
      return client.id !== id
    })
    this.setState({
      clients: clients
    })
  }

  addClient = (newClient) => {
    newClient.id = Math.random();
    let clients = [...this.state.clients, newClient];
    clients.sort((a, b) => a.name.localeCompare(b.name))
    this.setState({
        clients: clients,
    })
  }

  addLesson = (newLesson) => {
    newLesson.id = Math.random();
    newLesson.date = Date();
    let lessons = [...this.state.lessons, newLesson];
    this.setState({
        lessons: lessons,
    })
  }

  render() {
    return (
      <div className = "App">
        <NavBar/>
        <Clients clients = {this.state.clients} deleteClient = {this.deleteClient} lessons = {this.state.lessons}/>
        <AddClient addClient = {this.addClient}/>
        <AddLesson addLesson = {this.addLesson} lessons = {this.state.lessons} clients = {this.state.clients} income = {this.state.income} />
        <CalculateIncome lessons = {this.state.lessons} clients = {this.state.clients}/>
      </div>
    );
  }
}

export default App;

Это CalculateIncome.js

import React, {Component} from 'react'

class CalculateIncome extends Component {
        state = {
            totalIncome:0
        }

        calculation = () => {
            this.props.lessons.filter(lesson => {
                this.props.clients.filter(client => {
                    if (client.name === lesson.name){
                        let price = client.price
                        let time = lesson.time
                        return(price, time)
                    }
                    return (
                        this.setState({
                            totalIncome : (price * time)
                        })
                    )
                })       
            })
        }

        render() {
            return ( this.props.lessons.length ? 
            (this.state.totalIncome)  
                : 
            (<div className = "text-center my-5">You are broke</div>) 
        )
    }
}

export default CalculateIncome

Если вам нужно увидеть какие-либо другие компоненты, включая AddLesson.js и Clients.js, пожалуйста, дайте мне знать, я также опубликую их.