React JS приложение не отображает страницу

Есть React приложение. Иногда при редактировании какого-либо файла проекта может пострадать весь сайт, то есть все элементы сайта пропадают, а ошибок в vs code нет

Начались проблемы после подключения react-router-dom. Сам роутер находится в файле App.js На данный момент проблема в файле Dialogs.jsx Проблемы начались после map массивов. Бывали такие проблемы и с другими файлами. Вопрос: в чём проблема и как пофиксить

App.js

import React from 'react';
import './App.css';
import Header from './components/Header/Header.jsx';
import Navbar from './components/Navbar/Navbar.jsx';
import Profile from './components/Profile/Profile.jsx';
import Dialogs from './components/Dialogs/Dialogs.jsx';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const App = () => {
    return (
        <BrowserRouter>
            <div className='main-wrapper'>
                <Header />
                <Navbar />
                <div className='main-wrapper-content'>
                    <Routes>
                        <Route path='/profile' element={<Profile />} />
                        <Route path='/dialogs/*' element={<Dialogs />} />
                    </Routes>
                </div>
            </div>
        </BrowserRouter>
    );
}

export default App;

Dialogs.jsx

import React from 'react';
import module from './Dialogs.module.css';
import { Link } from 'react-router-dom';

let DialogsData = [
  {id: 1, userName: 'Liana'},
  {id: 2, userName: 'Airat'},
  {id: 3, userName: 'Irina'},
  {id: 4, userName: 'Dinar'}
];

let MessagesData = [
  {id: 1, message: 'Yo'},
  {id: 2, message: 'sup?'},
  {id: 3, message: 'you good?'},
  {id: 4, message: 'damn'}
];

let DialogElements = DialogsData.map (d => <DialogItems id={d.id} userName={d.userName} />);

let MessageElements = MessagesData.map (mess => <Message id={mess.id} message={mess.message} />);

const DialogItems = (props) => {
  let path = '/dialogs/' + props.id;
  return (
    <div className={module.dialog}>
      <Link to={path} className={activeLink => activeLink.isActive ? module.active : module.item}>{props.userName}</Link>
    </div>
  )
}

const Message = (props) => {
  return (
    <div>{props.message}</div>
  )
}

const Dialogs = () => {
  return (
    <div className={module.dialogsPage}>
      <div className={module.dialogs}>
        {DialogElements}
      </div>
      <div className={module.messages}>
        {MessageElements}
      </div>
    </div>
  )
}

export default Dialogs;