React Router V6 UseContextApi: object null is not iterable

I am having a small problem with my code.

So, this is the first time I am trying to implement context on a project but I am getting an error:

Uncaught TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))

I guess is because the object is not being accessed by the child component.

Here is the parent component (My Routes)

import {UserContext} from "../Context/UserContext"

function WebRoutes() {
  const [user,setUser]=useState(null);

  return (
    <UserContext.Provider value={(user,setUser)}>
    <Router>
        <Routes>
            <Route path="/" element={<Login/>}/>
            <Route path="/home" element={<Home/>}/>
            <Route path="/departaments" element={<Departaments/>}/>
            <Route path="/product/:id" element={<Product/>}/>
            <Route path="*" element={<NotFound/>}/>
        </Routes>
    </Router>
    </UserContext.Provider>
  )
}

This one will be the child component:

import React, {useState, useContext} from 'react'
import {UserContext} from '../../Context/UserContext';

const [user,setUser]=useContext(UserContext)

That’s the way I am trying to get the context.

I am not sure where I am wrong.

This is the UserContext file:

import {createContext} from "react"

export const UserContext = createContext(null);

I would appreciate any kind of help. I am trying to achieve this by using a course.

Thanks a lot in advance.