composition instead of context

compositionContext.txt

import { useState } from "react";

const Container = ({ children }) => <div>{children}</div>;

const AddOneButton = ({ setCounter }) => (
  <div>
    <button onClick={() => setCounter((v) => v + 1)}>Add One</button>
  </div>
);

const Counter = ({ counter }) => {
  return <div>Counter: {counter}</div>;
};

export default function CounterUseState() {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <Container>
        <AddOneButton setCounter={setCounter} />
        <Counter counter={counter} />
      </Container>
    </div>
  );
}

import "./styles.css";
import { useState } from "react";
import CounterUseState from "./counter-use-state";

export default function App() {
  return (
    <div className="App">
      <CounterUseState />
    </div>
  );
}