Nested Multifields are not getting displayed on the page

HTML file looks something like this 

<div data-sly-use.model="com.test.Header">
    <ul data-sly-list.header="${model.header}">
        <div data-sly-test="${header.link}">
            <img src="${header.link}">
            <h2>${header.name}</h2>
            <p>${header.description}</p>
        </div>
    </ul>
    <ul data-sly-list.section="${model.sections}">
        <div>
            <img src="${section.link}" alt="">
            <h1>${section.name}</h1>
            <p>${section.description}</p>
            <h3>${section.video}</h3>
            <ul data-sly-list.subsections="{section.subsection}">
                <h3>${subsections.name}</h3>
                <ul data-sly-list.bullets="{subsections.bullets}">
                    <li>${bullets.name}</li>
                    <li>${bullets.description}</li>
                </ul>
            </ul>
        </div>
    </ul>
</div>

public class Header {
    
    @Inject
    private List<HeaderContent> header;
    
    @Inject
    private List<SectionsContent> sections;
}

public class SectionsContent {
    
    @Inject
    private String link;
    
    @Inject
    private String name;
    
    @Inject
    private String description;
    
    @Inject
    private String video;
    
    @Inject
    private List<SubSection> subsection;
}

public class SubSection{
    
    @Inject
    private String name;
    
    @Inject
    private List<Bullets> bullets;
}

public class HeaderContent {
    
    @Inject
    private String link;
    
    @Inject
    private String name;
    
    @Inject
    private String description;
    }

 These are the classes (Using lombok annotations)

When i load the page HTML page the subsections is not being populated.. I checked the crx and that content exist. Is there anything else i am missing ?