ReactJs Context -- TypeError: Object(...) is not a function

Question

我的 React 应用程序中出现“Object(...) 不是函数”错误

文件：SchemasContext.js

import React, { useState, createContext } from "react";

export const SchemasContext = createContext([]);

export const SchemasProvider = props => {
  const [schemas, setSchemas] = useState([]);

  return (
    <SchemasContext.Provider value={[schemas, setSchemas]}>
      {props.children}
    </SchemasContext.Provider>
  );
};

文件：Sidebar.js

import React from 'react';

import { Schemas } from './components.js'
import { SchemasProvider } from "../context/SchemasContext";

console.log('sidebar SchemasProvider: ', SchemasProvider);

function Sidebar() {
  return (
    <SchemasProvider>
      <Schemas />
    </SchemasProvider>
  );
}

该console.log('sidebar SchemasProvider: ', SchemasProvider);语句似乎确认导入已正确完成，它输出：

sidebar SchemasProvider:  
SchemasProvider(props)
?
length: 1
?
name: "SchemasProvider"
?
prototype: Object { … }
?
<prototype>: function ()

然而我仍然以错误告终：

Sidebar.js:8
TypeError: Object(...) is not a function
SchemasContext.js:5
    SchemasProvider SchemasContext.js:5
    React 22
    js index.js:6
    Webpack 3
The above error occurred in the <SchemasProvider> component:
    in SchemasProvider (created by Sidebar)
    in Sidebar

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <redacted> to learn more about error boundaries. react-dom.development.js:16764
TypeError: Object(...) is not a functionSchemasContext.js:5
    SchemasProvider SchemasContext.js:5
    React 18
    js index.js:6
    Webpack 3

提前致谢！