How to bind non-UI entity with UI entity in Bevy

Description

I'm trying to implement trigger logic when the player faced the trigger I should remove the UI element from the screen.

Spawning the trigger point

/// Create a trigger point and when the user faced with
///  it I'll mark the tutorial as `in-progress` and
///  remove it when the collision between tutorial
///  and player is stopped
commands
  .insert(Sensor(true))
  .insert(Collider::cuboid(8.0, 8.0))
  .insert(ActiveEvents::COLLISION_EVENTS)
  .insert_bundle(SpriteBundle {
    sprite: Sprite {
      color: Color::rgb(0.1, 0.1, 0.1),
      custom_size: Some(Vec2::new(16.0, 16.0)),
      ..Default::default()
    },
    transform: *tutorial_transform,
    ..Default::default()
  })

  // Tutorial is a component which I'll filter as `tutorial_entity`
  .insert(Tutorial);

Create a UI

commands
  .spawn_bundle(NodeBundle {
    ///
  })

  /// Trying to bind UI element with `Tutorial` entity
  ///  to remove it from the screen when the user faced with collider
  .insert(Parent(tutorial_entity))

When the user faced collision

// I want to despawn all children UI elements that are linked with this non-UI element
commands.entity(tutorial_entity).despawn_recursive()

Error

I've got an error and no UI on the screen at all

Styled child in a non-UI entity hierarchy. You are using an entity with UI components as a child of an entity without UI components, results may be unexpected

Question

Do you know how to link a non-UI element with a UI element to remove the non-UI element and remove all linked UI elements with it?