useContext with no context

I have defined a context using createContext that wraps some of my components like

import MyContext from './mycontext.js'
import A from 'a.js';
import B from b.js';
<MyContext>
    <A/>
    <B/>
</MyContext>

where A is defined something like

import C from './c.js'
const A = () => {
    return (<C/>);
}

And C is define something like

import MyContext from 'mycontext.js';

const C = () => {
    const { value, setValue } = useContext(MyContext);
    return (<div>`This is the value - ${!!value ? value : 'UNK'}`</div>)
}

Finally the context is created like

const MyContext = createContext({value: '', setValue: () => {}});

The problem is that I get a runtime error

TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

From the component C.

I want to make provision for calling C outside of the provider. Not as a wrapped child of the provider. Where does this error come from and how do I work around it?