NextJS - socket.io - CSS _ Flexbox: столбец моего flexbox не может создать столбец списка пользователей моего чата

Я работаю с NextJS и буду отображать список пользователей моей комнаты в столбце. Этот список извлекается после того, как все пользователи подключились, создавая событие, которое позволяет обновлять мой компонент при входе нового пользователя. Пользователь хранится в массиве объектов в состоянии моего компонента.

Я пробовал flexbox, но у меня не получилось. Однако мне кажется, что все хорошо, также я бы добавил, что на codeandbox.io мой код работает хорошо.

Итак, я предположил, что это из-за моего ./reset.css, но ничего не изменится, если я его удалю. Я пытался играть со своими кодами CSS и JS, даже явно добавляя элемент <br/>, но, лол, даже <br/> не может спровоцировать новую строку.

Итак, я предположил: «Эй, может быть, это режим разработки», я запустил yarn build, чтобы создать свое следующее приложение, затем yarn start, чтобы запустить производственный режим, и это здорово! нет, это просто упало.

Я предположил, что «я включен, это соединение сервера с NextJS, которое приводит к некоторому сложному поведению», я отключил socket.io, отключил componentDidMount в комментарии, а затем установил массив с нуля, чтобы оценить изменение: это было еще хуже.

Хорошо, я выбрал вариант «помощь коллеги», может быть, кто-то здесь знает, что происходит?

интересный совет, похоже, что мое приложение отображает весь компонент вместо обновления компонента:

Вот мой snippet.js:

renderRoomUser=(data)=>{         
        return this.state.roomUserStock.map((roomUserItem, index) => {
            console.info("renderRoomUser roomUserItem: ", roomUserItem) 
            return (
                <li
                className = {style.room_user_item}
                key = {index}> 

                {roomUserItem} 

                </li>
        )})

    }

    render() {
        return (
        <div className = {style.page}> 

            <div
                className = {style.room_user_container} 
            >
                <h2>People</h2>
                <ul className = {style.room_user_list}> {this.renderRoomUser()} </ul>
            </div>

вот мой css.snipet:

.page{ 
    width: 100vw;
    height: 100%; 
    min-height: 100vh;
    background: rgb(253, 108, 217);  
      /* display: flex;
    flex-direction: column;
    justify-content: center; */
    display:grid;
    grid-template-areas: 
        "room_user message_area";
    grid-template-columns: 25vw 5fr; 

}




/**** room aera ****/ 

.room_user_container{ 
    width: 100%;
    height: 100%;
    grid-area:room_user;
    background:rgb(228, 104, 104);
    display:flex; 
    flex-direction: column;
    align-items: center; 
}

.room_user_container h2{ 

    font-weight:bold;
    justify-self: flex-start;
    margin: 5vh 0;
}

.room_user_container ul{
    background:rgb(96, 255, 130);
    height: 100%;
    width: 100%;
    color: green;
    display:flex; 
    flex-direction: column;
    flex-wrap: wrap; 
    align-items: center; 
    margin-bottom: 5vh;
} 

.room_user_container ul li{ 
    background:rgb(96, 205, 255);
    height: 100%; // auto rather than 100% for example, would yeild better rendering
    width: 100%;
    display:inline-block;

}

Любой намек был бы замечательным, Благодарность