I don't know why my react page is blank. This started happening after I made a submit button that wouldn't refresh the page. This is the last file that I worked on and everything is compiling correctly. Here it is:

1st page:

2nd page:

This was last page I worked on and this is where my React page started to turn blank. Just let me know if there anything wrong with my click event. Here is my react blank page:

code:

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;