Что заставляет мою страницу реакции быть пустой?

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

1-я страница:

2-я страница:

Это была последняя страница, над которой я работал, и именно здесь моя страница React начала становиться пустой. Просто дайте мне знать, если что-то не так с моим событием клика. Вот моя реагирующая пустая страница:

код:

import { Avatar } from '@mui/material';
import React from 'react';
import './messageSender.css';

function MessageSender() {
  
    document.getElementById("submit").addEventListener("click", (event) => {
        event.preventDefault();
    });

    return (
    <div className = "messageSender">
        <div className = "messageSender__top">
            <Avatar />
            <form>
                <input 
                    className = "messageSender__input"
                    placeholder = {`What's on your mind?`}
                />
                
                <input  placeholder = "Image URL (Optional)"/>

                <button id = "submit" type = "submit">
                    Hidden Submit
                </button>
            </form>
        </div>

        <div className = "messageSender__bottom">

        </div>
    </div>
  )
}

export default MessageSender;