HTML Color Picker Changes Text Value of a Div That Comes After

Currently, working on The Odin Project – Etch-a-Sketch. I’m trying to include a ‘color picker’ onto the web page so that the user can change the color of the marker.

However, once I select a color the div after my ‘color picker’ div changes from it’s original value to the Hex color code I selected (image shown below).

How do I prevent this?

<div class='color'> 
    <input type='color' id='colorSelect' value='#333333'>
    <label for="colorSelect">Color Picker</label>
</div>

<div class='backgroundColor'>
    <input  type='color' id='bgColorSelect' value='#333333'>
    <label for="bgColorSelect">BG Color Picker</label>
</div>

<div class='eraser'>
    <span>Eraser</span>
</div>