Issue with named and default imports on react app on stackblitz

I have a sample React app on Stackblitz and I have the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

Here is the code:

import React from 'react';
import { useEffect, useState } from 'react';
import { MyContext } from './MyContext';
import './style.css';

export default function App() {
  const [myValue, setMyValue] = useState('');

  useEffect(() => {
    Promise.resolve('some value from promise').then((res) => {
      console.log(res);
      setMyValue(res);
    });
  }, []);

  return (
    <MyContext.provider value="{{myValue}}">
      <div>
        <h1>Hello StackBlitz!</h1>
        <p>Start editing to see some magic happen :)</p>
      </div>
    </MyContext.provider>
  );
}

As you can see for yourself (see link below), I have not mixed default and named imports but still I get the above error...

Here is the complete app on stackblitz:

https://stackblitz.com/edit/react-xkxhxk?file=src/App.js

If I comment out the <MyContext.provider tag, then the app works. The error message seems misleading.

Can someone please help?

It should be <MyContext.Provider> not <MyContext.provider>