TypeError：render不是函数反应钩子

Question

在过去的两天中，我第一次使用Redux，但第一次使用Provider-Consumer上下文概念。

以下是我要在同一文件中添加提供者和使用者的代码。 这可能吗？ 如果是这样，我的方法正确吗？ 如果不是我要去哪里错了？ 我想使用布局及其子组件中的值。 我的方法正确吗？

index.js

       ReactDOM.render(
                <Router>
                    <ClientContext.Provider value={client}>// graphQL Provider
                        <CommonProvider>      
                            <Switch>
                                <MyProvider.Consumer>{
                                        (value) =>{
                                        <Layout {...value} >
                                            <Switch>
                                                <Route exact path="/" render={props => ( 
                                                                        <Installation  {...props} />
                                                                     )} />  
                                                <Route path="/xyz" component={xyz} />
                                            </Switch>
                                        </Layout>
                                    }}
                                </MyProvider.Consumer>
                            </Switch>    
                        </CommonProvider>
                    </ClientContext.Provider>
                </Router>,
                document.getElementById('root')
                );

Provider.js

                            import React ,{ createContext,useState,useContext,useEffect } from "react";
                            import Sign from '/loginpage';

                            const MyProvider=createContext({});
                            export default MyProvider;

                            export const  CommonProvider =props=>{
                                const [value,setValue]=useState("");
                                const DataContext={value,setValue};
                                useEffect(()=>{console.log("Data Provider",value,"props",props,"DataContext",DataContext)})
                                return(
                                    <MyProvider.Provider value={DataContext}>
                                        {props.children}
                                    </MyProvider.Provider>
                                );
                            };

                            const UseHOC=WrapperComponent=>function Comp(props){
                                const dataCtx=useContext(MyProvider);
                                useEffect(()=>{console.log("propsHOC",props,"MyProvider",MyProvider,"dataCtx",dataCtx)})
                                if(value.isUser)
                                    return(            
                                        <WrapperComponent
                                        {...props}
                                        value={dataCtx.value}
                                        setValue={dataCtx.setValue}
                                        />              
                                    );
                                    else       
                                        return <Sign/>                                        
                            };

                            export { UseHOC };

我写了提供商和HOC吗？ 我应该将其放置在其他文件中吗？ 我什至需要HOC吗？

感谢您的帮助。 还有其他办法吗？