How to make a step control component?

Question

I have a component:

import React from "react";
import styles from "./Clicker.module.scss";

class Clicker extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: props.counter,
      step: props.step,
    };
  }

  componentDidMount() {
    this.setState({
      counter: 0,
      step: 1,
    });
  }

  add = () => {
    this.setState((previous) => ({
      counter: previous.counter + previous.step,
    }));
  };

  changeCountInput = ({ target: { value } }) => {
    const toNumber = Number(value);
    this.setState(toNumber > 0 ? { step: toNumber } : { step: 1 });
  };

  render() {
    const { counter } = this.state;

    return (
      <article className={styles.container}>
        <h1 className={styles.counter}>{counter}</h1>
        <input
          onChange={this.changeCountInput}
          placeholder="set step (default - 1)"
          className={styles.inputCount}
        />
        <button onClick={this.add} className={styles.buttonCounter}>
          Change counter
        </button>
      </article>
    );
  }
}

export default Clicker;

I need to make a step control component.

I don't understand how to do it.

I ask you to explain how to do this. I'm not asking you to do it for me, just theoretically, what should I do to create a step control component?

UPD: As the teacher said, you need to move this piece of code into a separate component.

<input
   onChange={this.changeCountInput}
   placeholder="set step (default - 1)"
   className={styles.inputCount}
 />