contextだったものをpropsにするときにそのまま値を引き継ぐとどうなるかの思考実験

const useCounter = () => {
  const [count, setCounter] = useState(0)
  const increment = () => setCounter( v => v + 1)
  const decrement = () => setCounter( v => v - 1)
  return {count ,increment, decrement} 
}

const CounterContext = createContext(null)

const CounterProvider = ({children}) => {
  const value = useCounter()
  return <CounterContext.Provider value={value}>
    {children}
  </CounterContext.Provider>
}

import React, { createContext, FC, useState } from 'react'

// Contextに使われていたcustom hooks。値と操作関数のencapselation
const useCounter = () => {
  const [count, setCounter] = useState(0)
  const increment = () => setCounter( v => v + 1)
  const decrement = () => setCounter( v => v - 1)
  return {count ,increment, decrement} 
}


// この名前はなんとすべきか。contextに習えばvalueか。
type CounterValues = ReturnType<typeof useCounter>
type CounterServiceProps = {
  counterValues: CounterValues
}
const CounterPreview: FC<CounterServiceProps> = ({ counterValues }) =>  <div>{counterValues.count}</div>
const CounterIncrementButton: FC<CounterServiceProps> = ({ counterValues}) =>  <div>
  <button onClick={() => counterValues.increment()}>+</button>
</div>
const CounterDecrementButton: FC<CounterServiceProps> = ({ counterValues}) => <div>
  <button onClick={() => counterValues.decrement()}>-</button>
</div>
const CounterButtons: FC<CounterServiceProps> = (props) =>  <div style={{flexDirection:"column"}}>
  <CounterIncrementButton {...props} />
  <CounterDecrementButton {...props} />
</div>

export default function Home() {
  const counterValues = useCounter() 
  return (
    <div>
      <CounterPreview counterValues={counterValues}/>
      <CounterButtons counterValues={counterValues}/>
    </div>
  )
}

export default function Home() {
  const counterValues = useCounter()
  const timeValue = useMyTimes()
  const props = { counterValues, timeValue}
  return (
    <div>
      <TimeForm {...props}/>
      <ConterForm {...props} />
      <Preview {...props} />
    </div>
  )
}