React js Table with Select Row

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel" data-presets="env,react">
      const { useState, useEffect } = React;
      function App() {
       const [items, setItems] = useState([
    { id: 1, name: 'John', email: 'john@example.com' },
    { id: 2, name: 'Jane', email: 'jane@example.com' },
    { id: 3, name: 'Bob', email: 'bob@example.com' },
    { id: 4, name: 'Andrew', email: 'andrew@example.com' },
  ]);

const [selectedRows, setSelectedRows] = useState([]);

const isSelected = (item) => {
    return selectedRows.some((selectedItem) => selectedItem.id === item.id);
  };

return (
    <div className='container'>
      <h2>React Table with Selected Row</h2>
      <p>{JSON.stringify(selectedRows)}</p>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item) => (
            <tr
              key={item.id}
              className={isSelected(item) ? 'selected' : ''}
              onClick={() => toggleSelected(item)}
            >
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
      }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      .container {
        max-width: 500px;
        margin: 0 auto;
        border-radius: 5px;
        font-family: Arial, sans-serif;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         padding:10px
      }
      
      table {
      border-collapse: collapse;
      width: 100%;
      max-width: 600px;
      margin: 20px auto;
    }

th,
    td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
    }

th {
      background-color: #f2f2f2;
    }

tr:hover {
      background-color: #f5f5f5;
    }

.selected {
      background-color: #fafad2;
    }

tbody tr:last-child td {
      border-bottom: none;
    }
      
    </style>
  </body>
</html>