usage-v1.tsx

<PermissionProvider permissions={currentUser.permissions}>
   . . .
    <Restricted to="list.elements">
        <ElementList elements={elements} addElement={addElement} removeElement={removeElement}/>
    </Restricted>

   <div className="container">
       <table className="table table-sm table-hover">
           <thead className="thead-light">
           <tr>
               <th scope="col">Name</th>
               <th scope="col">Price</th>
               <th scope="col">Currency</th>
               <th scope="col" className="text-right">
                   <Restricted to='add.element'>
                       <button className="btn btn-primary btn-sm" onClick={addRandomElement}>
                           <i className="bi-plus-circle"/>
                       </button>
                   </Restricted>
               </th>
           </tr>
           </thead>
           <tbody>
           {elements.map(e => (
               <tr key={e.name}>
                   <td>{e.name}</td>
                   <td>{e.price}</td>
                   <td>{e.currency}</td>
                   <td className="text-right">
                       <Restricted to='delete.element'>
                           <button className="btn btn-danger btn-sm" onClick={() => removeElement(e)}>
                               <i className="bi bi-trash"/>
                           </button>
                       </Restricted>
                   </td>
               </tr>
           ))}
           </tbody>
       </table>
   </div>
</PermissionProvider>