TypeError: render is not a function while using React Context along with React Router

I need to set up a user state that can be called from different components. This setup uses React Router and React Context. The React context contains just a single state that keeps track of the user's name.

At the top-level i.e App I have passed all the children on to the provider. But I get an error

TypeError: render is not a function

My UserContext code:

const UserContext = createContext();

export const UserProvider = (props) => {
  const [user, setUser] = useState("");
  return (
    <UserContext.Provider value={[user, setUser]}>
      {props.children}
    </UserContext.Provider>
  );
};

export default UserContext;

My App code :

function App() {
  return (
    <UserProvider>
      <Router>
        <div>
          <Nav />
          <Switch>
            <Route exact path="/" component={Signup} />
            <Route exact path="/signin" component={SignIn} />
            <Route path="/register" component={UserRegister} />
            <Route path="/homepage/:user" component={Homepage} />
          </Switch>
        </div>
      </Router>
    </UserProvider>
  );
}

export default App;

The entrie error log:

TypeError: render is not a function
updateContextConsumer
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:18747
  18744 | {
  18745 |   ReactCurrentOwner$1.current = workInProgress;
  18746 |   setIsRendering(true);
> 18747 |   newChildren = render(newValue);
        | ^  18748 |   setIsRendering(false);
  18749 | } // React DevTools reads this flag.
  18750 | 
View compiled
beginWork
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:19114
  19111 |   return updateContextProvider(current, workInProgress, renderLanes);
  19112 | 
  19113 | case ContextConsumer:
> 19114 |   return updateContextConsumer(current, workInProgress, renderLanes);
        | ^  19115 | 
  19116 | case MemoComponent:
  19117 |   {
View compiled
HTMLUnknownElement.callCallback
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:3945
  3942 | function callCallback() {
  3943 |   didCall = true;
  3944 |   restoreAfterDispatch();
> 3945 |   func.apply(context, funcArgs);
       | ^  3946 |   didError = false;
  3947 | } // Create a global error event handler. We use this to capture the value
  3948 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:3994
  3991 | // errors, it will trigger our global error handler.
  3992 | 
  3993 | evt.initEvent(evtType, false, false);
> 3994 | fakeNode.dispatchEvent(evt);
       | ^  3995 | 
  3996 | if (windowEventDescriptor) {
  3997 |   Object.defineProperty(window, 'event', windowEventDescriptor);
View compiled
invokeGuardedCallback
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:4056
  4053 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
  4054 |   hasError = false;
  4055 |   caughtError = null;
> 4056 |   invokeGuardedCallbackImpl$1.apply(reporter, arguments);
  4057 | }
  4058 | /**
  4059 |  * Same as invokeGuardedCallback, but instead of returning an error, it stores
View compiled
beginWork$1
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:23964
  23961 | } // Run beginWork again.
  23962 | 
  23963 | 
> 23964 | invokeGuardedCallback(null, beginWork, null, current, unitOfWork, lanes);
        | ^  23965 | 
  23966 | if (hasCaughtError()) {
  23967 |   var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
View compiled
performUnitOfWork
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22776
  22773 | 
  22774 | if ( (unitOfWork.mode & ProfileMode) !== NoMode) {
  22775 |   startProfilerTimer(unitOfWork);
> 22776 |   next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
        | ^  22777 |   stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
  22778 | } else {
  22779 |   next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
View compiled
workLoopSync
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22707
  22704 | function workLoopSync() {
  22705 |   // Already timed out, so perform work without checking if we need to yield.
  22706 |   while (workInProgress !== null) {
> 22707 |     performUnitOfWork(workInProgress);
  22708 |   }
  22709 | }
  22710 | 
View compiled
renderRootSync
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22670
  22667 | 
  22668 | do {
  22669 |   try {
> 22670 |     workLoopSync();
        | ^  22671 |     break;
  22672 |   } catch (thrownValue) {
  22673 |     handleError(root, thrownValue);
View compiled
performSyncWorkOnRoot
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22293
  22290 |   }
  22291 | } else {
  22292 |   lanes = getNextLanes(root, NoLanes);
> 22293 |   exitStatus = renderRootSync(root, lanes);
        | ^  22294 | }
  22295 | 
  22296 | if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
View compiled
scheduleUpdateOnFiber
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:21881
  21878 |   // root inside of batchedUpdates should be synchronous, but layout updates
  21879 |   // should be deferred until the end of the batch.
  21880 | 
> 21881 |   performSyncWorkOnRoot(root);
        | ^  21882 | } else {
  21883 |   ensureRootIsScheduled(root, eventTime);
  21884 |   schedulePendingInteractions(root, lane);
View compiled
updateContainer
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:25482
  25479 |   }
  25480 | 
  25481 |   enqueueUpdate(current$1, update);
> 25482 |   scheduleUpdateOnFiber(current$1, lane, eventTime);
  25483 |   return lane;
  25484 | }
  25485 | function getPublicRootInstance(container) {
View compiled
(anonymous function)
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:26021
  26018 | 
  26019 | 
  26020 |   unbatchedUpdates(function () {
> 26021 |     updateContainer(children, fiberRoot, parentComponent, callback);
        | ^  26022 |   });
  26023 | } else {
  26024 |   fiberRoot = root._internalRoot;
View compiled
unbatchedUpdates
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22431
  22428 | executionContext |= LegacyUnbatchedContext;
  22429 | 
  22430 | try {
> 22431 |   return fn(a);
        | ^  22432 | } finally {
  22433 |   executionContext = prevExecutionContext;
  22434 | 
View compiled
legacyRenderSubtreeIntoContainer
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:26020
  26017 |   } // Initial mount should not be batched.
  26018 | 
  26019 | 
> 26020 |   unbatchedUpdates(function () {
        | ^  26021 |     updateContainer(children, fiberRoot, parentComponent, callback);
  26022 |   });
  26023 | } else {
View compiled
render
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:26103
  26100 |     }
  26101 |   }
  26102 | 
> 26103 |   return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
  26104 | }
  26105 | function unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
  26106 |   if (!isValidContainer(containerNode)) {
View compiled
Module.<anonymous>
G:/WebDevelopmentFolder/trinkerrchallenge/src/index.js:6
  3 | import "./index.css";
  4 | import App from "./App";
  5 | 
> 6 | ReactDOM.render(
  7 |   <React.StrictMode>
  8 |     <App />
  9 |   </React.StrictMode>,
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:1581:30
__webpack_require__
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:1595:18
__webpack_require__
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
checkDeferredModules
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;