Context provider value gets displayed then disappears

I have a mini react application to practice useContext hook, I made a theme context that enables the user to toggle the website’s theme color between black and grey, and it works fine, then I made another context for the current user, the user can navigate to the signup page and enter his name, and when the user clicks signup, a function called userSignup will set the current name to whatever the user entered as a value in the input and it is supposed to be displayed at the top left corner of the navbar. But the problem is, the name gets displayed for less than a second and then disappears.
This is the code of the App.js file:

import React, { createContext, useState, useContext, useEffect, useReducer } from 'react';
import './style.css'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";
import Home from './Home';
import Shop from './Shop';
import Signup from './Signup';

export let themeContext = createContext();
export let currentUser = createContext()


export default function App() {
  const [theme, setTheme] = useState('black');
  const [user, setUser] = useState();
  const userSignUp = (name) => {
    setUser(name);
  }


  return (
    <Router>
      <themeContext.Provider value={theme}>
        <currentUser.Provider value={user}>
          <div className="app" style={{ backgroundColor: theme }}>
            <nav className='nav-bar' >
              <div className="brand">
                Hello {user}
              </div>
              <div className="nav-elements">
                <Link to={'/'}>HOME</Link>
                <Link to={'/Shop'}>SHOP</Link>
                <Link to={'/signup'}>SIGNUP</Link>
              </div>
              <div className="theme">
                <label htmlFor="checkbox-switch" className='text'>toggle theme</label>
                <div className="switch">
                  <input type="checkbox" id='checkbox-switch' onChange={() => setTheme(theme === 'black' ? 'grey' : 'black')} />
                  <div className="bgrnd">
                    <label htmlFor="checkbox-switch" className="toggle"></label>
                  </div>
                </div>
              </div>
            </nav>
          </div>
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/Shop/' element={<Shop />} />
            <Route path='/signup/' element={<Signup userSignUp={userSignUp} />} />
          </Routes>
        </currentUser.Provider>
      </themeContext.Provider>

    </Router>
  );
}

This is the code for the signup page component:

import React, { useContext,useRef } from 'react';
import { themeContext } from './App';
import { currentUser } from './App';
import './style.css'
export default function Signup({userSignUp}) {
    const theme = useContext(themeContext)
    const user = useContext(currentUser)
    const info = useRef()
    return (
        <div className="signup" style={{ backgroundColor: theme, color: 'white' }}>
            <h1>Hello {user} this is the signup page title</h1>
            <p>Hello the is the signup page content</p>
            <form action="">
                <div>
                    <label htmlFor="name">
                        Type your name
                        <input type="text" id='name' ref={info} />
                    </label>
                </div>
                <div>
                    <label htmlFor="nickname">
                        Type your nickname
                        <input type="text" id='nickname' />
                    </label>
                </div>
                <input type="submit" value='Sign up' onClick={()=>userSignUp(info.current.value)}/>
            </form>
        </div>
    );
}

And the is the styling code:

body{
    padding: 0;
    margin: 0;
    height: 100vh;
}

html{
    font-size: 10px;
}

#root{
    width: 100%;
    height: 100%;
}

.app{
    padding: 7rem;
    background-color: black;
}

.nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 2rem;
}

.nav-elements{
    display: flex;}

.nav-elements a{
    text-decoration: none;
    color: white;
    margin: 0 4rem;
}

.bgrnd{
    background-color: white;
    height: 3rem;
    width: 9.5rem;
    border-radius: 3rem;
    color: wheat;
    position: relative;
}

.bgrnd::before{
    content: '';
    position: absolute;
    background-color: gray;
    border-radius: 3rem;
    height: 3rem;
    width: 3rem;
    transition: all .2s linear;
}

#checkbox-switch{
    opacity: 0;
}

#checkbox-switch:checked + .bgrnd::before{
    transform: translateX(6.5rem);
    background-color: black;
}

.toggle{
    position: absolute;
    width: 9.5rem;
    height: 3rem;
    border-radius: 3rem;
}

.theme{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 25rem;
}

.theme .text{
    font-size: 2.5rem;
    margin-top: 1.7rem;
}

p,h1{
    font-size: 4rem;
}