React ログイン状態の保持について

Reactで質問があります。
ログイン状態でユーザー情報を更新する（ボタンをクリックする）と、ログアウトになってしまいます。
そのままReloadするとまたログイン状態に戻ります。
エラーも特に見当たらず、何が原因なのかわかりません。
可能性としてどういうことが考えられますか？

import React, { useState, useContext } from 'react'
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../../../context/AuthContext';
import './FormEditProfile.css'
import myApi from '../../../service/service'


const FormEditProfile = () => {
  const { user, setUser } = useContext(AuthContext)
  console.log({ user, setUser })//<-----userは確認できます
  const navigate = useNavigate()
  const [username, setUsername] = useState(user.username)
  const [email, setEmail] = useState(user.email)
  const [message, setMessage] = useState('')

  const handleUsernameChange = (event) => {
    setUsername(event.target.value)
  }

  const handleEmailChange = (event) => {
    setEmail(event.target.value)
  }

  const handleSubmit = async (event) => {
    event.preventDefault()
    const changes = { username, email }
    try {
      const response = await myApi.patch('/user/edit', changes)
      setUser(response.data)
      navigate('/profile')
    } catch (error) {
      console.log(error)
      setMessage('An error occurred while saving changes')
    }
  }

  return (
    <div className='FormEditProfile'>
      <h2>Edit Informations</h2>
      <form onSubmit={handleSubmit}>
        <label htmlFor='username'>New Username:</label>
        <input type="text" value={username} name='username' id='username' onChange={handleUsernameChange} placeholder='new username' />

        <label htmlFor='email'>New Email:</label>
        <input type="text" value={email} name='email' id='email' onChange={handleEmailChange} placeholder='new email' />

        <button>Save Changes</button>
      </form>
      <div>{message}</div>
    </div>
  )
}

export default FormEditProfile

import { useContext } from 'react'
import { AuthContext } from './../../context/AuthContext'
import { Navigate, Outlet } from 'react-router-dom'


const ProtectedRoute = () => {
  const { isLoading, user } = useContext(AuthContext)

  if (isLoading) {
    return <p>Loading...</p>
  }
  console.log({ isLoading, user })<---ここではuserが確認できません（{isLoading: false, user: null}）
  if (!user) {
    return <Navigate to="/login" />
  }
  return <Outlet />
}

export default ProtectedRoute