I have n React functional components which share 90% of their content, but differ in a few functions they use.

Let's say my components are the following:

export default function BWPage(props) {
    const f = (x) => x+1
    const g = (x) => f(x)*2
    const h = (x) => g(x)*x
    return <div>{h(props.input)}</div>
}

export default function ColorPage(props) {
    const f = (x) => x+1
    const g = (x) => {props.setColor(f(x)); return 4;}
    const h = (x) => g(x)*x
    return <div>{h(props.input)}</div>
}

And so on. In OO programming I would obviously override the required function and be happy, but that isn't possible in React. The official guidelines say to use composition, but I don't see how that works here. Passing all functions that can be different as a prop is impractical as then g would be unable to call f. I also cannot create put all common functions somewhere else and import them, as then h isn't able to call g. What is the proper solution here?