React Js Get Difference between two Arrays of Objects

<!DOCTYPE html>
<html>

</head>

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

const App = () => {
      const array1 = [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        { id: 3, name: 'Alice' },
      ];

const array2 = [
        { id: 2, name: 'Jane' },
        { id: 4, name: 'Bob' },
      ];

// Calculate the difference between array1 and array2
      const difference = array1.filter((obj1) => !array2.find((obj2) => obj1.id === obj2.id));

return (
        <div>
          <h1>React js Array Difference in React.js</h1>
          <h2>Array 1:</h2>
          <ul>
            {array1.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
          <h2>Array 2:</h2>
          <ul>
            {array2.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
          <h2>Difference:</h2>
          <ul>
            {difference.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    .container {
      border-radius: 8px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin: 20px auto;
      max-width: 400px;
      text-align: center;
    }
  </style>
</body>

</html>