Patterns for default Properties

Question

We inject a List of Components into a Card Component. This Card component has a GUI overlay, which allows Users to Choose the Component used and their Properties.

According to Dan Abramov FunctionalComponent.defaultProps will eventually be deprecated, which we used in our first prototype to bubble the required values upstream.

const Field = ({text}) => <div>{text}</div>
Field.defaultProps = {text: "Default Value"}

Our second Approach was adding a HOC receiving a callback from Card to provide the prop defaults this way.

const withGUI = (defaults, Component) => props => {
    const cb = props.onDefaultsChange
    useEffect(() => cb?.(defaults), [cb])
    return <Component {...props}/>
}

const Field = withGUI({text: "Default Value"}, ({text}) => <div>{text}</div>)

Our third approch simplified the HOC to

const withGUI = (defaults, Component) => {
    Component.gui_props = defaults
    return Component
}

Do the Approaches 1 and 3 differ enough to avoid interfering with the potential deprecation?