ComponentA

export const ComponentA = () => {
    const [counter, setCounter] = useState(0)
    
    return (
        <>
            <div><b>i am the at {counter} counter</b></div>
            <ComponentB setCounter={setCounter}/>
            <ComponentC setCounter={setCounter}/>
        </>
    )
}

ComponentB

export const ComponentB = ({setCounter}) => {
    return (
        <>
            <button onClick={()=>setCounter(counter => counter+1)}>Add One</button>
        </>
    )
}

ComponentC

export const ComponentC = ({setCounter}) => {
    return (
        <>
            <button onClick={()=>setCounter(counter => counter+2)}>Add Two</button>
        </>
    )
}