In reactable, is there a way to automatically expand a sub-group when expanding a parent group if there is only one sub-group below it?

In this example, Quebec has two sub-groups so if I click the row, it should keep its default behavior and expand to reveal the two subgroups below it. If I click on Mississippi however, there is only one subgroup and so I would like it to automatically expand the Treatment sub-group to reveal the Plant subgroups.

Here is my code using the built in CO2 data. I commented out the two methods I tried.

library(reactable)

datasets::CO2 |> 
  head(60) |> 
  reactable(
    groupBy = c("Type", "Treatment", "Plant"),
    onClick = JS(
      # not working
      "function(rowInfo) {
        if (rowInfo.subRows.length == 1) {
          // rowInfo.subRows.toggleRowExpanded(true);
          // rowInfo[rowInfo.index + 1].toggleRowExpanded(true);
        }
      }"
    ),
    # extra formatting for visual aid
    defaultColDef = colDef(resizable = TRUE),
    rowStyle = JS(
      "function(rowInfo) { 
        return { background: (rowInfo.expanded === true) ? '#eee' : 'white' }; 
      }"
    )
  )

Some resources I used were:

• This SO answer: React Table using hooks expand and collapse rows and their sandbox example. It seems like something here has the answer, I'm just not familiar enough with JS to apply the concepts
• reactable documentation:
  • cookbook - .html#nested-tables
  • examples - .html#expandable-row-details
  • JS styling - .html#row-styling