The proper way to handling multiple user roles and 2 statues for changing logic and UI in React

i got a project has 3 users roles (parent – child – teacher) and each role has 2 different statues (booked – unbooked) that changes the UI and logic.

Example:-
the home header in the home page will be change based on the user role and the statues.

How to solve this problem without big chain of conditions ?

Wrong Answer ❌

  switch (userRole) {
    case 'parent':
      switch (status) {
        case 'booked':
          return // BookedParentComponent
        case 'unbooked':
          return // UnBookedParentComponent
      }

    case 'child':
      switch (status) {
        case 'booked':
          return // BookedChildComponent
        case 'unbooked':
          return // UnBookedChildComponent
      }

    case 'teacher':
      switch (status) {
        case 'booked':
          return // BookedTeacherComponent
        case 'unbooked':
          return // UnBookedTeacherComponent
      }
  }