Javascript Color Picker - React Js

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div class="color-picker-container">
      <h3>Javascript Color Picker Example</h3>
      <p id="colorValue">Selected Color:</p>
      <div id="colorPicker"></div>
      <input type="color" id="colorInput" value="#000000" />
    </div>

colorInput.addEventListener("input", function () {
        var color = colorInput.value;
        colorPicker.style.backgroundColor = color;
        colorValue.textContent = "Selected Color: " + color;
      });
    </script>
    <style>
      .color-picker-container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

#colorPicker {
        width: 200px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        margin-bottom: 10px;
        transition: background-color 0.3s ease-in-out;
      }
    </style>
  </body>
</html>