how to display data in edit modal with thymleaf - button

Question

I want to populate the data in my table when an edit button is clicked, I have already displayed those data in a table with a button corresponding to each row and when I click the button,I want the edti modal popup to populate the information in that row, the popup modal is displayed when I click on it but it is blank. No data is populated in it. I don't really know how to go about it.
Here is the code
Data class
#Entity
#Data
#NoArgsConstructor
#AllArgsConstructor
public class Country {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String code;
private String capital;
private String description;
private String nationality;
private String continent;
#OneToMany(mappedBy = "country")
private List<State> states;
}
here is my controller
#Controller
public class CountryController {
#Autowired
private CountryService countryService;
#GetMapping("/countries")
public String getCountries(Model model) {
List<Country> countryList = countryService.getAllCountries();
model.addAttribute("countries",countryList);
return "country";
}
#PostMapping("/countries/addNew")
public String saveInfo(Country country){
countryService.saveCountryInfo(country);
return "redirect:/countries";
}
#GetMapping("/country/{id}")
public String findById(#PathVariable Long id, ModelMap modelMap) {
modelMap.put("id", id);
Country country = new Country();
country.setId(id);
country.setCapital(country.getCapital());
country.setCode(country.getCode());
country.setContinent(country.getContinent());
country.setDescription(country.getDescription());
country.setNationality(country.getNationality());
modelMap.put("country", country);
return "country";
}
}
Here is my html page
<section class="section dashboard">
<div class="row">
<!-- Left side columns -->
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<!-- Image background -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal" data-whatever="#mdo">Add A Country</button>
<h1>List of Country</h1>
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Code</th>
<th>Capital</th>
<th>Description</th>
<th>Nationality</th>
<th>Continent</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="country:${countries}">
<td th:text="${country.getId}"></td>
<td th:text="${country.getCode}"></td>
<td th:text="${country.getCapital}"></td>
<td th:text="${country.getDescription}"></td>
<td th:text="${country.getNationality}"></td>
<td th:text="${country.getContinent}"></td>
<td>
<div class="btn-group">
<a th:href="#{/country/{id} (id=${country.getId})}" class="btn btn-primary"data-bs-toggle="modal" data-bs-target="#editModal" data-whatever="#mdo">Edit</a>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- End of Image background -->
</div><!-- End Left side columns -->
</div>
</div>
</div>
</section>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Update Country</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form th:objec="${country}" th:action="#{/country/update}" method="put">
<div class="form-group">
<label for="idEdit" class="col-form-label">Id:</label>
<input type="text" class="form-control" id="idEdit" name="id" th:value="*{id}">
</div>
<div class="form-group">
<label for="codeEdit" class="col-form-label">Code:</label>
<input type="text" class="form-control" id="codeEdit" name="code" th:value="*{code}">
</div>
<div class="form-group">
<label for="capitalEdit" class="col-form-label">Capital:</label>
<input type="text" class="form-control" id="capitalEdit" name="capital" th:value="*{capital}">
</div>
<div class="form-group">
<label for="descriptionEdit" class="col-form-label">Description:</label>
<input type="text" class="form-control" id="descriptionEdit" name="description" th:value="*{description}">
</div>
<div class="form-group">
<label for="nationalityEdit" class="col-form-label">Nationality:</label>
<input type="text" class="form-control" id="nationalityEdit" name="nationality" th:value="*{nationality}">
</div>
<div class="form-group">
<label for="continentEdit" class="col-form-label">Continent:</label>
<input type="text" class="form-control" id="continentEdit" name="continent" th:value="*{continent}">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>