How to pass props to the function in React

Hello,
I’m working on my Pomodoro Clock
here is my code
codesandbox

now I’m trying to set timer
bellow is my Timer component
I’m trying to pass from App component to Timer the session duration
and in Timer component to set setInerval()
If I pass props from App to Timer and copy it to the state (in the code i comment it)
it working but then I cant to handle the App session duration
So in such case I need the App session duration in Timer as props not as state.
How I could to pass this.props.session to the tick() function, or maybe here is more clever solution?

import React from "react";

class Timer extends React.Component {
  // state = {
  //   session: this.props.session
  // };

  componentDidMount() {
    this.timer = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  tick() {
    this.setState({
      session: this.state.session - 1
    });
  }

  render() {
    let session = this.props.session;
    return (
      <div>
        <h1>Timer</h1>
        <h3>{session}</h3>
      </div>
    );
  }
}

export default Timer;

The props that you pass to any class component is available anywhere in that component, in case of a dumb component you’d have to read it as a parameter, but since your timer is a class component you can just simply read the session prop in your tick() function,

  tick() {
   console.log(this.props.session)
    this.setState({
      session: this.state.session - 1
    });
  }

example above will log the sessions prop on every tick.

If you’re using Timer as a dumb prop with all state contained in the App component, the function tick() should probably be defined in App and passed into Timer as a prop, right?