Trouble Rendering Item Details in Vaadin Grid for a Spring Boot Project

Question

I'm working on a Spring Boot application where I'm using Vaadin version 24.1.5 to display a list of Store objects in a grid. I want to show additional details for each item when clicked, but I'm encountering issues in rendering the details.

Here's a snippet of the code I'm using:

// Imports

@Route("")
@Component
public class StoreView extends VerticalLayout {
    @Autowired
    private StoreService storeService;
    private Grid<Store> grid;

    @PostConstruct
    public void init() {
        this.grid = new Grid<>();
        grid.addColumn(Store::getClientCodeProlog).setHeader("Client Code Prolog");
        grid.addColumn(Store::getName).setHeader("Name");

        grid.setDetailsVisibleOnClick(true);
        grid.setItemDetailsRenderer(createStoreDetailsRenderer());

        List<Store> stores = storeService.getTestStores();
        grid.setItems(stores);

        grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);
        add(grid);
    }

    private static ComponentRenderer<StoreDetailsFormLayout, Store> createStoreDetailsRenderer() {
        return new ComponentRenderer<>(StoreDetailsFormLayout::new, StoreDetailsFormLayout::setStore);
    }
}

//Imports

public class MagasinDetailsFormLayout extends FormLayout {
    private Magasin magasin;
    private final TextField adresseField;
    private final TextField telephoneField;

    public MagasinDetailsFormLayout() {
        adresseField = new TextField("Address");
        telephoneField = new TextField("Phone");
        Stream.of(adresseField, telephoneField).forEach(field -> {
            field.setReadOnly(true); 
            add(field);
        });

        adresseField.getStyle().set("background-color", "red");
        telephoneField.getStyle().set("background-color", "blue");

        setResponsiveSteps(new ResponsiveStep("0", 3));
        setColspan(adresseField, 3);
        setColspan(telephoneField, 3);
    }

    public void setMagasin(Magasin magasin) {
        this.magasin = magasin;
        adresseField.setValue(magasin.getAdresse());
        telephoneField.setValue(magasin.getTelephoneMag());
    }
}

When I run this code, the grid displays the Store objects, but the details are not shown when an item is clicked.

I have tried debugging and testing various parts, but I can't figure out what's wrong.Here's what I've tried so far:

Ensured that the details renderer is properly set up. Checked if the Store attributes are being passed to the renderer.

Can anyone help me understand what's wrong and how I can fix it? Any guidance on how to correctly set up and test this functionality would be much appreciated. Thank you!