props overridden in nested elements

[MarcDAFrame]

I have a few nested elements like the following

// Text
export const Text = (props) => {
    <input {...props}/>
}
Text.craft = {
    props: {
        value: 'text1'
    }
}

// Button
export const Button = (props) => {
    <button>
        <Element is={Text} value={props.value}/>   
    </button>
}
Button.craft = {
    props: {
        text: 'text2'
    }
}

// Header
export const Header = (props) => {
    <div>
        <Element is={Button} value={props.value}/>   
    </div>
}
Header.craft = {
    props: {
        text: 'text3'
    }
}

but unfortunately when I edit the text for the inner Text component only the Text.props.value changes, and when rendered are overwritten by the Button.props.value and Header.props.value.

I update the props like the following

<input onChange={(e)=>setProp((props) => (props.value = e.target.value))}/>

what is the right way of doing this?