show many-to-many (roles) in table: Inertia with React

I have a table that shows a list of users. Each user can be assigned more than one role. I would like to display the user roles in the column ROLES.

My backend:

use Inertia\Response as InertiaResponse;

public function index() : InertiaResponse
{
     return inertia('Users/Index', [
         'users' => User::query()->when($search, fn ($query) =>
            $query->where('name', 'LIKE', "%{$search}%")->orWhere('email', 'LIKE', "%{$search}%")
        )->orderByDesc('created_at')->paginate(10)->withQueryString(),
         'roles' => Role::all(),
     ]);
}

In my frontend:

const { users, roles } = usePage().props, { data } = users;

return (
  {data.map((user, index) => (
      <Table>
         <tr key={index}>
           <td>{user.name}</td>
           <td>{/* TODO: userRoles */}</td>
         </tr>
      </Table>
   ))}
);

I'm stuck on how to bring in to display the user roles for each user. I know I have to first declare it in the backend, then pass it to React to render it. But how??