want to scroll for particular area not the Top and bottom part, it should not overlap

I am creating a Todo App using React-Hook js... And i am facing in CSS part?

hello, I want to be the header and footer part should be fixed at there place i just want to scroll the main part but its over lapping and going behind each other Please help me by allowing me to scroll only the main part which should not overlap on header and footer

My JS Code:

return(
        <div className="guestRoom">
            <header>
                <div className="Headder">
                    <p><FaUser size={50}/></p>
                    <h1 className="headTitle">Guest Room</h1>
                </div>
            </header>
            <main>
                <div className="warningData">
                    <TiWarningOutline size={20}/>
                    <p className="warningText">
                        <b>Note:</b>Hello Alien, You are now using this App is Guest Mode. So,
                        All your Today's list may get delete just after closing this App.. 
                        In this gest mode nothing is going to save anyware So, if Today's TODO
                        is importent You can login by your gMail account and store in our database for 
                        24h or else you can take a screenshot of by pressing the screenshot button 
                        and download the image
                    </p>
                </div>
                <div className="ToDo">
                    <h2>I have Todo:</h2>
                    <ul>
                        {todos.map(todo=>(
                            <li id={todo.id}>
                                <div className="TodoListPart">
                                    <p>{todo.data}</p>
                                    <p className="deleteAlign">
                                        <button className="deleteAlignbtn" onClick={(todo)=>{deleteTodo(todo)}}>
                                            <MdDeleteForever size={20}/>
                                        </button>
                                    </p>
                                </div>
                            </li>))}
                    </ul>
                </div>
            </main>
            <footer>
                <div>
                    <form className="inputGrid" onSubmit={addInTodo}>
                        <input 
                            type="text" 
                            className="insertData" 
                            placeholder="I have todo ..." 
                            value={toDo} 
                            onChange={(e)=>{setToDo(e.target.value)}}/>  
                        <button type="submit" className="addTodo"><RiSendPlaneFill size={25} color="white"/></button>
                    </form>
                </div>
                <div className="screenshot">
                    <p><button className="ssBtn">Take Screenshot</button></p>
                </div>
            </footer>
        </div>
    )

and connected Css Code:

header{
    top:0;
    left: 0;
    width: 100%;
    height: auto;
    position:fixed;
    
}
main{
    position:static;
}
footer{
    position:fixed;
    width: 100%;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(rgba(77, 77, 77, 0.829),rgba(77, 77, 77, 0.952),rgb(77, 77, 77))
}

.inputGrid{
    display: grid;
    grid-template-columns: auto 15%;
    grid-column-gap: 5px;
}

.guestRoom{
    display: grid;
    grid-template-rows: auto auto auto;
    grid-row: 5px;
}

.warningData{
    border-radius: 5px;
    border: 1px solid rgb(252, 255, 59);
    background-color: rgba(255, 240, 36, 0.801);
    text-align: left;
    font-size: smaller;
    padding: 10px;
    padding: 0 0;
    margin: 0 0;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 5px;
}

.ToDo{
    border-radius: 10px;
    border: 2px solid rgb(165, 107, 32);
    background-color: transparent;
}

.screenshot{
    width: 100%;
    text-align: center;
}

.warningText{
    padding: 0 0;
    margin: 0 0;
}

.Headder{
    display: grid;
    grid-template-columns: 20% auto;
    grid-column-gap: 5px;
    text-align: center;
    background-image: linear-gradient(rgb(77, 77, 77),rgba(77, 77, 77, 0.952),rgba(77, 77, 77, 0.829));
    color: rgb(255, 255, 255);
}
.headTitle{
    text-align: left;
    width: 100%;
}

.ssBtn{
    border-radius: 20px;
    text-align: center;
    background-color: rgba(41, 255, 184, 0.795);
    border: transparent;
    box-shadow: 0px 2px rgba(223, 223, 223, 0.808);
}

.deleteAlignbtn{
    background-color: transparent;
    border: transparent;
    width: 100%;
    height: 100%;
}

.TodoListPart{
    display: grid;
    grid-template-columns: auto 15%;
    grid-column-gap: 8px;
    background-color: transparent;
}

.deleteAlign{
    text-align: right;
}

.addTodo{
    border-radius: 50px;
    text-align: center;
    background-color: transparent;
    border:transparent;
}

.insertData{
    width: 100%;
    padding: 5px 5px;
    margin: 5px 4px;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid rgb(255, 255, 255);
    background-color: #83838377;
    border-radius: 5px;
    color:rgb(255, 255, 255);
    font-size: 16px;
}

it should not overlap on other tags

It would be really great full if you can help me anyway...