React context usage with createContext does have an optional default value and most of the explanations on web are something like below.

import { createContext } from 'react';
const Context = createContext('Default Value');

then we have the Provider components on the context object which makes the child components capable to listen the context using Consumer components.

function Main() {
  const value = 'My Context Value';
  return (
    <Context.Provider value={value}>     /* Why is it mandatory to provide value attribute when we have the default value argument in createContext method. */
      <MyComponent />
    </Context.Provider>
  );
}

and then Using Consumers we can get the values without worrying about using the props way of passing data in React js.

<Context.Consumer>
      {value => <span>{value}</span>}   //context value in anonymous inner function
    </Context.Consumer>

Why do we need to separate values for context using the createContext method and then on Provider component ? can't we use the value passed to createContext method itself ? Thanks in advance.