React Js Sort AlphaNumeric String

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script type="text/babel">
    const { useState } = React;
    function App() {
      const [arrayOfObjects, setArrayOfObjects] = useState([
        { name: "Alice10", age: 30, city: "New York" },
        { name: "Charlie5", age: 35, city: "Chicago" },
        { name: "Bob2", age: 25, city: "Los Angeles" },
        { name: "Eve15", age: 28, city: "San Francisco" },
        { name: "David7", age: 40, city: "Miami" },
        { name: "Grace8", age: 29, city: "Seattle" },
        { name: "Frank12", age: 32, city: "Boston" },
        { name: "David3", age: 27, city: "Austin" },
        { name: "Eve9", age: 31, city: "Denver" },
        { name: "Alice12", age: 34, city: "Philadelphia" },
      ]);
      const compareAlphanumeric = (a, b) =>
        a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" });

const sortArrayByAlphanumeric = () => {
        const sortedArray = [...arrayOfObjects].sort(compareAlphanumeric);
        setArrayOfObjects(sortedArray);
      };

return (
        <div className='container'>
          <h3 className='header'>React js Alphanumeric Sorting</h3>
          <button className='sort-button' onClick={sortArrayByAlphanumeric}>Sort by Name</button>
          <ul className='object-list'>
            {arrayOfObjects.map((obj, index) => (
              <li key={index} className='object-item'>
                {obj.name}, Age: {obj.age}, City: {obj.city}
              </li>
            ))}
          </ul>
        </div>

);
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      max-width: 600px;
      margin: 0 auto;
    }

/* Style the header */
    .header {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
    }

/* Style the sort button */
    .sort-button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

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

/* Style the object list */
    .object-list {
      list-style-type: none;
    }

/* Style the object item */
    .object-item {
      padding: 10px;
      margin-bottom: 10px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

/* Style alternating object items */
    .object-item:nth-child(even) {
      background-color: #f7f7f7;
    }
  </style>
</body>

</html>