chore: infer React context providers and prefer use (#11669)

As of [React 19](https://react.dev/blog/2024/12/05/react-19), context
providers no longer require the `<MyContext.Provider>` syntax and can be
rendered as `<MyContext>` directly. This will be deprecated in future
versions of React, which is now being caught by the
[`@eslint-react/no-context-provider`](https://eslint-react.xyz/docs/rules/no-context-provider)
ESLint rule.

Similarly, the [`use`](https://react.dev/reference/react/use) API is now
preferred over `useContext` because it is more flexible, for example
they can be called within loops and conditional statements. See the
[`@eslint-react/no-use-context`](https://eslint-react.xyz/docs/rules/no-use-context)
ESLint rule for more details.

test/admin/components/CustomProvider/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { createContext, useContext, useState } from 'react'
+import React, { createContext, use, useState } from 'react'
 
 type CustomContext = {
   getCustom
@@ -18,13 +18,13 @@ export const CustomProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   }
 
   return (
-    <Context.Provider value={value}>
+    <Context value={value}>
       <div className="custom-provider" style={{ display: 'none' }}>
         This is a custom provider.
       </div>
       {children}
-    </Context.Provider>
+    </Context>
   )
 }
 
-export const useCustom = () => useContext(Context)
+export const useCustom = () => use(Context)