fix user avatarUrl and div keys attr

frontend/src/components/chatPage/messageForm/MessegaForm.jsx

@@ -34,7 +34,7 @@ export const MessageForm = () => {
             <Box className='messageBox'>  
                 {
                 startMessages.map((item, i) =>
-                    <div key={item.id} className={ 
+                    <div key={i + 1} className={ 
                         (item.userName === user.userName)? 'message myMessage' :'message'}
                         onClick = {(e) => {
                             if(e.target.className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){
@@ -47,12 +47,13 @@ export const MessageForm = () => {
                         {storeMessageId === item._id ? <MessageEditorMenu/> : ""} 
 
                         <StyledAvatar
+
                             anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}  
-                             variant = {userNamesOnlineSet.has(item.userName)? 'dot' : ''}
+                            variant = {userNamesOnlineSet.has(item.userName)? 'dot' : ''}
                                    
                             >
                             <Avatar 
-
+                                key={i} 
                                 src= {SERVER_URL + item?.user?.avatar}
                                 sx={
                                     (item.userName == user.userName)
@@ -71,7 +72,7 @@ export const MessageForm = () => {
                         
                         </StyledAvatar>
                         <div 
-                            key={item._id + 1}
+                            key={i/10}
                         
                             className={ 
                                 (item.userName === user.userName)? 'message myMessage' :'message'}>
@@ -85,6 +86,7 @@ export const MessageForm = () => {
                                 title="YouTube video player" 
                                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                 allowFullScreen> 
+                                
                             </iframe>
                             :
                             <p>{item.text}</p>  

frontend/src/components/chatPage/userInfo/UserInfo.jsx

@@ -43,11 +43,13 @@ export const UserInfo = () => {
     const isTabletorMobile = (window.screen.width < 730);
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
 
-    let userAvatarUrl = SERVER_URL + (storeUserAvatar || user.avatar);
 
-    const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
-    
+
+    let userAvatarUrl = storeUserAvatar || user.avatar;
+
     
+    const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
+
     const inputHandler = (e) => {
         const file = e.target.files[0]
         dispatch(getUserAvatar(file))
@@ -60,7 +62,8 @@ export const UserInfo = () => {
                 <Avatar
                     sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
                     onClick={() => loadAvatarHandler()}
-                    src={userAvatarUrl} >
+                    src={userAvatarUrl ? SERVER_URL + userAvatarUrl : ""}
+                    >
                 </Avatar>  
                 <input
                         type="file"