How do I add an option from a select class to a list when chosen by the user? - class

Question

I am trying to allow a user to add an option from a select class after pressing submit. As of now, it is adding the whole list. How do I go about allowing the user to select the specific option that they have chosen?
<div class="col alert alert-dark">
<h1 class="text-center">To Do App</h1>
</div>
<form class="form text-center col-8 ml-auto mr-auto alert alert-primary" id="newTaskForm">
<label for="toDo" class="toDo">What Color Do You Want To Add?</label>
<div class="row">
<select class="form-control col-8 mr-2" id="colorToAdd">
<option>Red</option>
<option>Yellow</option>
<option>Orange</option>
<option>Green</option>
<option>Blue</option>
</select>
<button type="submit" class="btn btn-success col-2" id="taskSubmit">Submit</button>
</div>
</form>
<hr class="col-8 ml-auto mr-auto mb-3">
<section class="text-center col-8 ml-auto mr-auto alert alert-dark" id="toDoList">
<h2>Tasks</h2>
<div id="colors">
</div>
window.addEventListener("load", () => {
const form = document.querySelector("#newTaskForm");
const input = document.querySelector("#colorToAdd");
const list_el = document.querySelector("#colors");
form.addEventListener("submit", (e) => {
e.preventDefault();
const colorElement = document.createElement("div");
colorElement.classList.add("newColor");
colorElement.type = "text";
colorElement.innerHTML = input.innerHTML;
list_el.appendChild(colorElement);
});
});