Update on Async Rendering- ReactJs - reactjs

Question

Following a tutorial-
Console Warning:
componentWillUpdate has been renamed, and is not recommended for use. Move data fetching code or side effects to componentDidUpdate.Rename componentWillUpdate UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. Please update the following components: Identicon
At first, the app correctly displayed "Welcome Username", but after refreshing I got the warning on the console.
Now, when I type something into Username... and click on Set Nickname nothing happens.
I am expecting to see "Welcome Username"
<div className={styles.welcome}>Wecome {username}</div>
I do not think there is anything wrong with my handleSetUsername function, because it worked previously.
On the Moralis app I see that there are 4 users correctly connected from my Metamask account.
Sidebar.js
const {
isAuthenticated,
nickname,
setNickname,
username,
setUsername,
handleSetUsername,
} = useContext(AmazonContext)
return (
<div className={styles.container}>
<div className={styles.profile}>
{isAuthenticated && (
<>
<div className={styles.profilePicContainer}>
<Image
src={`https://avatars.dicebear.com/api/pixel-art/${username}.svg`}
alt='profile'
className={styles.profilePic}
height={100}
width={100}
/>
</div>
{!username ? (
<>
<div className={styles.username}>
<input
type='text'
placeholder='Username....'
className={styles.usernameInput}
value={nickname}
onChange={e => setNickname(e.target.value)}
/>
</div>
<button
className={styles.setNickname}
onClick={handleSetUsername}
>
Set Nickname
</button>
</>
) : (
<div>
<div className={styles.welcome}>Wecome {username}</div>
</div>
)}
</>
)}
<div className={styles.connectButton}>
<ConnectButton />
</div>
</div>
<div className={styles.menu}>
<Link href='/'>
<div className={styles.menuItem}>
<Image
src={logo}
height={30}
width={30}
className={styles.amazonLogo}
/>
My Amazon
<br /> Board
</div>
</Link>
<div className={styles.menuItem}>
<FaBox />
Collections
</div>
<div className={styles.menuItem}>
<BsFillBookmarkFill />
Saved
</div>
<div className={styles.menuItem}>
<BsFillPersonFill />
Profile
</div>
<Link href='/history'>
<div className={styles.menuItem}>
<AiOutlineHistory />
Transaction History
</div>
</Link>
</div>
<div className={styles.companyName}>
<Image src={logofull} alt='amazon' height={100} width={100} />
</div>
</div>
)
}
export default Sidebar