React Sum Values in Array of Objects

<!DOCTYPE html>
<html>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;

function App() {
      const [numbers] = useState([13, 122, 13, 14, 15]); // Your array of numbers
      const [sum, setSum] = useState(0);

const calculateSum = () => {
        let total = 0;
        for (let i = 0; i < numbers.length; i++) {
          total += numbers[i];
        }
        setSum(total);
      }

return (
        <div className='container'>
          <h3>React Js Sum of Number in Array</h3>
          <p>{JSON.stringify(numbers)}</p>
          <button className='calculate-button' onClick={calculateSum}>Calculate Sum</button>
          <p className='sum-text'>Sum: {sum}</p>
        </div>

);
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    * {
      box-sizing: border-box;
    }

.container {
      margin: 0 auto;
      width: 600px;
      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;
    }

/* Styles for the calculate button */
    .calculate-button {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

.calculate-button:hover {
      background-color: #0056b3;
    }

/* Styles for the sum text */
    .sum-text {
      font-size: 18px;
      margin-top: 20px;
      color: #333;
    }
  </style>
</body>

</html>