使用react - typescript创建上下文时，找不到命名空间'ctx‘错误

import React, { createContext, useContext } from 'react';

// 创建上下文
interface MyContextType {
  // 定义上下文的数据类型
  message: string;
  // 定义上下文的方法类型
  setMessage: (message: string) => void;
}

const MyContext = createContext<MyContextType | undefined>(undefined);

// 使用上下文的组件
const MyComponent = () => {
  const context = useContext(MyContext);

  if (!context) {
    throw new Error('MyComponent must be used within a MyContextProvider');
  }

  const { message, setMessage } = context;

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('Hello World')}>Set Message</button>
    </div>
  );
};

// 上下文提供者
const MyContextProvider: React.FC = ({ children }) => {
  const [message, setMessage] = React.useState('');

  return (
    <MyContext.Provider value={{ message, setMessage }}>
      {children}
    </MyContext.Provider>
  );
};

// 在应用中使用上下文
const App = () => {
  return (
    <MyContextProvider>
      <MyComponent />
    </MyContextProvider>
  );
};

export default App;