useContext和Consumer之间的区别是什么？

当我使用React Context时，这两种方式之间是有区别的。

这是提供者

import { type } from "node:os";
import React, { useState } from "react";

export type ENV_TYPE = "dev" | "citest" | "gld" | "pre" | "prd" | string;
interface IUser {
  name: string;
  password: string;
  role: string;
}

export interface IDataContextState {
  env: ENV_TYPE;
  user: IUser[];
  onEnvChange: (env: ENV_TYPE) => void;
  onUserChange: (val: IUser[]) => void;
}
export const DataContext = React.createContext<IDataContextState>(
  {} as IDataContextState
);
const DataProvider = (props: any) => {
  const [user, setUser] = useState<IUser[]>({} as IUser[]);
  const [env, setEnv] = useState<ENV_TYPE>("dev");
  const onEnvChange = (env: ENV_TYPE) => {
    setEnv(env);
    // TODO （设置当前ENV的User）
  };
  const onUserChange = (val: IUser[]) => {
    setUser(val);
  };

  return (
    <DataContext.Provider
      value={{ env: env, user: user, onEnvChange, onUserChange }}
    >
      {props.children}
    </DataContext.Provider>
  );
};
export { DataProvider };

1. 消费者

    <DataProvider>
      <DataContext.Consumer>
        {({ env, onEnvChange }) => (
          <>
            <p>当前环境：{env}</p>
            <div className="app">
              <Tabs type="card" onChange={onEnvChange}>
                {tabData.map(({ key }) => (
                  <TabPane tab={key} key={key}>
                    <Main />
                  </TabPane>
                ))}
              </Tabs>
            </div>
          </>
        )}
      </DataContext.Consumer>
    </DataProvider>

这种方式onChange行之有效。但是当使用useContext时

2. useContext

import React, { useContext } from "react";
import { Tabs } from "antd";
import Main from "./components/main";
import { DataProvider, DataContext } from "./context";
import "./App.css";

const { TabPane } = Tabs;

const App: React.FC = () => {
  const {env,onEnvChange} = useContext(DataContext);
  const tabData = [
    {
      key: "dev",
    },
    {
      key: "citest",
    },
    {
      key: "gld",
    },
    {
      key: "pre",
    },
    {
      key: "prd",
    },
  ];
  const handleTabChange = (activeKey: string) => {
    onEnvChange(activeKey);
    console.log(activeKey);
  };
  return (
    <DataProvider>
      {/* <DataContext.Consumer>
        {({ env, onEnvChange }) => ( */}
          <>
            <p>当前环境：{env}</p>
            <div className="app">
              <Tabs type="card" onChange={handleTabChange}>
                {tabData.map(({ key }) => (
                  <TabPane tab={key} key={key}>
                    <Main />
                  </TabPane>
                ))}
              </Tabs>
            </div>
          </>
        {/* // )} */}
      {/* </DataContext.Consumer> */}
    </DataProvider>
  );
};

export default App;

那 Uncaught TypeError: onEnvChange is not a function

这是我的错？