aqui está meu Usercontext.js

import React from "react";

const Usercontext = React.createContext();

export default Usercontext;

e aqui está meu Usercontextprovider.jsx

import React, {  useState } from "react";
import Usercontext from "./usercontext";

const Usercontextprovider = ({children})=>{
    let [user,Setuser] = useState(null);
    <Usercontext.Provider value={{user,Setuser}}>
        {children}
    </Usercontext.Provider>
}
export default Usercontextprovider;

e aqui está meu Addtodo.jsx

import { useEffect, useState ,useContext} from "react";
import Usercontext from "./context/usercontext";

export default function Addtodo(){
    let [options,setoptions] = useState([]);
    let id = 1;
    let {setuser} = useContext(Usercontext);
    return(
        <>
        <input type="text" placeholder="ADD TO DO" defaultValue={''} className="border rounded-l-lg w-64 h-6 text-black" id='todo'/>
        <button className="bg-orange-500 rounded-r-lg" onClick={()=>{
            let todo = document.querySelector("#todo").value;
                options.push({
                    'id':id,
                    'tick':false,
                    'edit':false,
                    'todo':{todo}
                });
                setuser({options});
                id++;
                document.querySelector('#todo').value = '';
        }}>ADD</button>
        </>
    )
}

e aqui está meu app.jsx

import Addtodo from './Addtodo'
import Usercontextprovider from './context/usercontextprovider'
import List from './List'
function App() {
  return (
    <Usercontextprovider>
        <h1>Hello</h1>
        <Addtodo />
    </Usercontextprovider>
  )
}

exportar aplicativo padrão;

minha página da web agora está vazia, sem nenhum elemento na raiz, eu esperava que ela tivesse o Addtodo.jsx, mas está vazia