Vaadin 14 Grid not showing up

Hello,

I have a Vaadin 14 App and I have a simple Grid inside a VerticalLayout with just the headers. I have setSizeFull on both the grid and verticalLayout but the headers are not visible. Upon inspection on Chrome using the Dev tools, I see that the Grid is there with correct widthxheight but when I expand the grid, I see the columns are 0x0. I think that is the issue, I have spent two days searching and trying t=different solutions but I can not get it to show up.

@Route(value = "person")
@Slf4j
public class PersonView extends VerticalLayout {

    @Autowired
    private PersonService personService;

    private Grid<Person> grid = new Grid<>(Person.class);

    public PersonView() {
        addClassName("list-view");
        setSizeFull();
        configureGrid();

        add(grid);

//        add(new Text("Welcome to PersonView"));
//
//        List<Person> personList = new ArrayList<>();
//        personList.add(new Person(1l, "Moh", "Qumail", "Developer", new Car()));
//        personList.add(new Person(2l, "John", "Snow", "Character", new Car()));
//        personList.add(new Person(3l, "Ramesh", "Raja", "Tailor", new Car()));
//        personList.add(new Person(4l, "Taqwa", "Zahid", "Student", new Car()));
//
//        Grid<Person> grid = new Grid<>(Person.class);
//        grid.setItems(personList);
//        grid.removeColumnByKey("id");
//        grid.removeColumnByKey("cars");
//
//        grid.setColumns("firstName", "lastName", "jobTitle");
//        grid.setSizeFull();
//        grid.setWidthFull();
//        grid.setHeightFull();
//
////        Grid<Person> grid = new Grid<>(Person.class);
////        DataProvider<Person, Void> dataProvider = DataProvider.fromCallbacks(
////                query -> {
////                    int offset = query.getOffset();
////
////                    int limit = query.getLimit();
////
////                    List<Person> persons = personService.getPersonByLastName("Qumail");
////
////                    return persons.stream();
////                },
////                query -> personService.getPersonByLastName("Qumail").size()
////        );
////
////        grid.setDataProvider(dataProvider);
////
////        grid.addColumn(Person::getFirstName).setHeader("First Name");
////        grid.addColumn(Person::getLastName).setHeader("Last Name");
////        grid.addColumn(Person::getJobTitle).setHeader("Job Title");
//
//        NativeButton mainViewButton = new NativeButton("Home!");
//        mainViewButton.addClickListener( e-> {
//            mainViewButton.getUI().ifPresent(ui -> ui.navigate(""));
//        });
////        expand(grid);
//        add(grid, mainViewButton);
//        setWidthFull();
//        setSizeFull();
    }

    private void configureGrid() {
        grid.addClassName("person-grid");
        grid.setSizeFull();
        grid.setColumns("firstName", "lastName", "jobTitle", "cars");
    }
}