HTTP Post Request with nested collection in SpringBoot and Thymeleaf

I am new to Java and I'm currently working on a project with springboot and thymeleaf template engineer. I am having issues making an HTTP POST request with nested Set Collection.

• My Java Classes are

1. User Class

import java.util.Set;

public class User {

    private String name;
    private String school;
    private String bestSubject;

    private Set<Work> work;
     
*//constructors, getters and setters*

}

2. Work Class

public class Work {
    private String companyName;
    private String faxNumber;
    private String location;
*//constructors, getters and setters*

}

• Controller

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping(value = "/user-register")
    public String showUser(Model model) {
        User users = new User();
        model.addAttribute("users", userService.getUsersList());
        return "userPage";
    }

    @PostMapping(value = "/user-details")
    public String createUser(@ModelAttribute("users") User user){
        System.out.println(user);
        return "userResult";
    }
}

• Views

1. userPage.html

<form action="#" th:action="@{/user-details}" method="post" th:object="${users}">

                <div class="row">
                    <div class="col-4">
                        <label for="name" class="col-form-label">Full Name:</label>
                        <input type="text" id="name" th:field="*{name}" class="form-control">
                    </div>
                    <div class="col-4">
                        <label for="school" class="col-form-label">School:</label>
                        <input type="text" id="school"  th:field="*{school}" class="form-control">
                    </div>
                    <div class="col-4">
                        <label for="bestSubject" class="col-form-label">Best Subject:</label>
                        <input type="text" id="bestSubject"  th:field="*{bestSubject}" class="form-control">
                    </div>
                </div>

                <!--BUTTON TO ADD AND DELETE FIELDS-->
                <div class="row mt-4 mb-1">
                    <div class="col d-flex justify-content-between">
                        <div onclick="createField()" class="btn btn-primary float-start">Create row</div>
                        <div onclick="deleteField()" class="btn btn-danger float-end">Delete row</div>
                    </div>
                </div>
                <!--FIELDS LABEL-->
                <div class="row">
                    <div class="col-4">
                        <label for="companyName" class="col-form-label">Company Name:</label>
                    </div>
                    <div class="col-4">
                        <label for="faxNumber" class="col-form-label">Fax Number:</label>
                    </div>
                    <div class="col-4">
                        <label for="location" class="col-form-label">Location:</label>
                    </div>

                </div>

                <table class="table table-borderless mt-0" id="userTable">
                    <tbody id="tableBody">
                        <tr th:each="user : ${users.work}">
                            <td>
                                <input type="text" id="companyName" th:field="*{user.companyName}" class="form-control">
                            </td>
                            <td>
                                <input type="text" id="faxNumber" th:field="*{user.faxNumber}"  class="form-control">
                            </td>
                            <td>
                                <input type="text" id="location" th:field="*{user.location}" class="form-control">
                            </td>
                        </tr>
                    </tbody>
                </table>

                <button type="submit" class="btn btn-warning">
                    SUBMIT
                </button>

            </form>

2. UserResult.html

<p>Full Name: <span th:text="${users.name}"></span></p>
<p>University: <span th:text="${users.school}"></span></p>
<p>Best Subject: <span th:text="${users.bestSubject}"></span></p>

<table class="table table-striped .table-hover mt-1">
    <thead>
    <tr>
        <th scope="col">Company Name</th>
        <th scope="col">Fax Number</th>
        <th scope="col">Address</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${users.work}">
        <td th:text="${user.companyName}">
        </td>
        <td th:text="${user.faxNumber}">
        </td>
        <td th:text="${user.location}">
        </td>
    </tr>
    </tbody>
</table>

My QUESTION IS I keep getting User{name='...', school='...', bestSubject='...', work { **'null**' }}

Instead of

{
  name: '...'
  school: '...'
  work: {
    company_name: '...',
    fax_number: '...',
    location: '...'
  }
}

How do I ensure my Set collection returns the inputed data from the fields instead of null datatype?