Details table repeats under expandable row in reactable

Question

Goal

I am trying to create a table of characters where when you click to expand the row for a character, you see a full table of other details.

Reproducible example

Here's my attempt with the starwars data:

library(dplyr)
library(reactable)
library(tidyr)

fool <- starwars |>
  select(name, films, vehicles, starships) |>
  unnest(cols = films)


fool |>
  reactable(
    fullWidth = FALSE,
    groupBy = c("name"),
    details = function(index) {
      selected_name <- fool$name[index[1]]  
      filtered_data <- fool %>%
        filter(name == selected_name) %>%
        select(films, vehicles, starships) %>%
        distinct()  # Remove duplicates
      reactable(filtered_data)
    },
    columns = list(
      films = colDef(show = FALSE),
      vehicles = colDef(show = FALSE),
      starships = colDef(show = FALSE)
    ),
    bordered = FALSE,
    highlight = TRUE,
    filterable = TRUE
  )

Issue

The issue is that instead of seeing the table upon clicking a character's name, I see multiple expandable rows. The table is repeated in each of those rows. I want to see the table once and right away when I click on the name value. How do I fix this?