Javascript -> Почему мои файлы cookie не работают должным образом?

У меня есть приложение для реагирования, в котором я хочу, чтобы пользователь вошел в систему, и как только пользователь успешно войдет в систему, loginStatus будет сохранен в состоянии с именем loginState, которое затем будет сохранено в cookie со значением пути файла app.js. У меня есть второй файл cookie, созданный на той же странице входа в систему, который сохранит имя пользователя, чтобы, как только они перейдут на страницу профиля, он приветствовал их по имени пользователя. Проблема в том, что два файла cookie установлены по разным путям, но они, кажется, перезаписывают друг друга. Почему так и как это исправить? Вот соответствующий код:

Это функция, создающая мои файлы cookie для страницы профиля.

    const createCookie=(username)=>{
      let date = new Date()
      let hours = 1
      date.setTime(date.getTime()+(hours*60*60*1000))
      document.cookie=`${username}; expires=${date.toUTCString()}; path=./ProfilePage`
}

И именно здесь я создаю файлы cookie для моего app.js:

            if (user.isLoggedIn){
                setLoginStatus('logged in')
                document.cookie=`${loginStatus}; path=../App`
                let x = document.cookie;
                console.info(x)
            }

Вот мой app.js

class App extends Component {
  render(){
    let cookie = document.cookie;
    console.info(cookie)
    return (
        <div className = "App">
        <Provider store = {store}>
          <Router> 
            
            <Switch>
                <Route exact path='/Home' component = {Home}/>

                <Route path='/Login' component = {Login}/>
                <Route path='/Register' component = {Register}/>
                <Route path='/ProfilePage' component = {ProfilePage}/>
                <Route path = "*" component = {NotFoundPage} />

            </Switch>
          </Router>
        </Provider>

и я делаю то же самое с файлами cookie в js-файле страницы профиля.