React Js Convert Hex to RGB Color

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState } = React;

function App() {
        const [hexColor, setHexColor] = useState("#AD1457");
        const [rgbColor, setRgbColor] = useState("rgb(173, 20, 87)");

const convertHexToRgb = () => {
          // remove # symbol from the hex color code
          let hex = hexColor.replace("#", "");

// convert the hex color to RGB color
          let red = parseInt(hex.substring(0, 2), 16);
          let green = parseInt(hex.substring(2, 4), 16);
          let blue = parseInt(hex.substring(4, 6), 16);

// set the RGB color value
          setRgbColor(`rgb(${red}, ${green}, ${blue})`);
        };

return (
          <div className="container">
            <h4>React Js Convert Hex Color to RGB Color</h4>
            <label htmlFor="hexColorInput">Hex Color Code:</label>
            <input
              type="text"
              id="hexColorInput"
              className="hex-color-input"
              value={hexColor}
              onChange={(e) => setHexColor(e.target.value)}
              onInput={convertHexToRgb}
            />
            <br />
            <br />
            <label htmlFor="rgbColorInput">RGB Color:</label>
            <span
              id="rgbColorInput"
              className="rgb-color-input"
              style={{ backgroundColor: rgbColor }}
            >
              {rgbColor}
            </span>
          </div>
        );
      }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      .container {
        margin: 0 auto;
        width: 500px;
        text-align: center;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
          0 2px 4px 0 rgba(0, 0, 0, 0.24);
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
      }
      h4 {
        margin-top: 0;
      }

label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }

.hex-color-input {
        width: 100%;
        padding: 8px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

.rgb-color-input {
        display: inline-block;
        padding: 8px 12px;
        font-size: 16px;
        border-radius: 5px;
        color: #fff;
        background-color: #888;
      }
    </style>
  </body>
</html>