Error setting up context.Provider in a next.js project

Question

Following staff,

I started a project using Next.js, and after inserting some codes, I needed to create a Provider (myContext) to create global states, but when configuring Provider, my application is breaking, claiming an error in _Document.js

import React, { createContext } from "React";

const Mycontext = createContext();

export default Mycontext;

---

import React, { useState } from 'React'; import Mycontext from './myContext';

Function Conciergeprovider({ Children }) { const [searchTerm, setSearchTerm] = useState('); const [searchResult, setSearchResults] = useState([]);

Return ( <Mycontext.Provider value={ { searchTerm, setSearchTerm, searchResult, setSearchResults } }} > {Children} </Mycontext.Provider> );

}

---

import React from 'React'; import Conciergeprovider from '.. /context/conciergeProvider'; import { Themeprovider } from 'Styled-Components'; import Theme from '.. /Styles/Theme'; import Globalstyle from '.. /Styles/global';

Function Myapp({ Component, pageProps }) { Return ( <Component {...pageProps} /> ); }

export default Myapp;

Error on my screen:

rc/pages/_Document.js (11:8) @ Object.ctx.renderPage

9 | Try { 10 | ctx.renderPage = () =>

11 | originalRenderPage({ | 12 | enhanceApp: (App) => (props) => 13 | sheet.collectStyles(<App {...props} />), 14 | })