Typescript React Context Provider没有设置值

我正在try 开始使用React上下文挂钩，我似乎有一个我不理解的问题.

我定义了一个用户上下文，它只是一个表示"hello user"的字符串:

import { useContext, createContext } from "react"

export const UserContext = createContext<string | null>(null)

export interface IAuth {
  children: React.ReactNode;
}

const Auth: React.FC<IAuth> = (props) => {

  return(
    <UserContext.Provider value={"hello user"}>
      {props.children}
    </UserContext.Provider>
  )
}

export default Auth

然后我试图访问的是这样的:

const Dash: NextPage<dashPageProps> = (props) => {

  const contextMsg = useContext(UserContext)

  const submitForm = () => {
    console.log("logout")
  }

  return (
    <Auth>
    <div className="w-screen">
      <div className='text-xl'>
        Dashboard
      </div>
      <h1>{contextMsg}</h1>
      <button className='bg-gray-400 border-2 border-gray-600 w-fit mt-5' onClick={submitForm} >Log out</button>
    </div>
    </Auth>
  )
}

export default Dash

但是，即使我在使用UserContext.Provider时设置了一个值，也没有打印出任何内容.如果我在创建上下文时指定一个值，而不是通过提供程序设置它，那么它将有一个值.

我做错了什么？