I typed exactly same way but my code made TypeError like this. //useState in react code

Question

I checked my code more than 4 times and rewrited entire code. but I couldn't find any difference between Youtube code and mine.

here is the code

import axios from 'axios';
import { useEffect, useState } from 'react';
import './conversation.css';

export default function Conversation({conversation,currentUser}) {
    const [user,setUser] = useState(null);
    
    useEffect(()=>{
        const friendId = conversation.members.find((m)=>m !==currentUser._id);
        
        const getUser = async ()=>{
            try{
                const res = await axios ('/users?userId='+friendId);               
                setUser(res.data);                
            }catch(err){
                console.log(err);
            }            
        };        
        getUser()               
    },[currentUser, conversation]);    

    return(
       <div className='conversation'>
        <img 
            className='conversationImg' 
            src='https://img.seoul.co.kr/img/upload/2020/05/25/SSI_20200525111945_O2.jpg'
            alt=''
        />
        <span className='conversationName'>{user.username}</span>
       </div>
    );
}

enter image description here

enter image description here

console messages

it works in Youtube practice.

Actually, I found this when i changed this

const [user,setUser] = useState(null); -> const [user,setUser] = useState('');

it worked

or

const [user,setUser] = useState(null); leave it like practice code instead I changed

setUser(res.data); -> setUser(res.data.username);
<span className='conversationName'>{user.username}</span>; ->
<span className='conversationName'>{user}</span>;

I solves problems can move on next but I couldn't get it. Please explain me why origin code has caused the error.