React prop drilling

reactPropDrilling.js

import React, { useState } from 'react';

const ReactPropDrilling = () => {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      Main app container:
      <CounterDisplay counter={counter} />
      <div>
        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label,react/button-has-type */}
        Increment -
        <button onClick={() => setCounter(oldValue => oldValue + 1)} />
      </div>
    </div>
  );
};

const CounterDisplay = ({ counter }) => {
  return (
    <div>
      Actually I am quite complicated and have several levels deep before I show
      the counter value
      <SecondCounterDisplay counter={counter} />
    </div>
  );
};

const SecondCounterDisplay = ({ counter }) => {
  return (
    <div>
      Nope, not quite yet, one more level...
      <ThirdCounterDisplay counter={counter} />
    </div>
  );
};

const ThirdCounterDisplay = ({ counter }) => {
  return <div>OK, now I can display the counter value = {counter}</div>;
};

export default ReactPropDrilling;