Select items from combobox

[InduKrish]

Can you please advise how to select items from the combo box? This is how our html looks like.

Attached is the screenshot as well.

<table class="css-1ago99h" css="1">
<tbody>
<tr class="css-s1cytl">
<td width="15" data-testid="dp-td-round" class="css-fzli22">
<div data-testid="dp-field-round" class="css-xd87ek">
<div class="css-mz7xyg">
Round
</div>
<div>
<div>
<div class="react-select-container css-1v4s1kb-container">
<span id="react-select-10-live-region" class="css-7pg0cj-a11yText"></span>
<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"></span>
<div class="react-select__control css-1j38bos">
<div class="react-select__value-container react-select__value-container--has-value css-13r04yx" style="">
<div class="react-select__single-value css-15g31vs-singleValue">
3
</div>
<input id="detailsPanelSearchField-round-remote" tabindex="0" inputmode="none" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-label="" aria-labelledby="detailsPanelSearchField-round-remote" role="combobox" aria-readonly="true" class="css-1hac4vs-dummyInput" value="">
</div>
<div class="react-select__indicators css-1gqwmoq">
<span class="react-select__indicator-separator css-1hyfx7x"></span>
<div class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true">
<div class="css-1j5s5gg">
<svg viewBox="0 0 20 10" height="12" width="12" name="chevron-down" color="black" class="css-1d15tof" pointer-events="none">
<path d="M5.39611389,11.5678861 C4.85911389,12.2228861 4.85911389,13.2868861 5.39611389,13.9438861 L5.88211389, 14.5348861 C6.41811389,15.1898861 7.28811389,15.1898861 7.82511389,14.5348861 L14.1071139,6.86088611 C14.1171139, 6.84788611 14.1301139,6.84588611 14.1391139,6.83488611 L14.6251139,6.24088611 C14.8951139,5.91288611 15.0281139, 5.47888611 15.0261139,5.04788611 C15.0281139,4.61588611 14.8951139,4.18288611 14.6251139,3.85488611 L14.1391139, 3.26288611 C14.1301139,3.24988611 14.1181139,3.24688611 14.1071139,3.23488611 L7.82511389,-4.50211389 C7.28811389, -5.15711389 6.41811389,-5.15711389 5.88211389,-4.50211389 L5.39611389,-3.91011389 C4.85911389, -3.25311389 4.85911389,-2.19111389 5.39611389,-1.53611389 L10.7341139,5.04788611 L5.39611389,11.5678861 Z" id="down" transform="translate(10.009750, 5.016386) rotate(-270.000000) translate(-10.009750, -5.016386) "></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td data-testid="dp-td-awardingStart" class="css-vqalus">
<div data-testid="dp-field-awardingStart" class="css-xd87ek">
<div class="css-mz7xyg">
Awarding Start
</div>
<div>
09/19/2025 at 1200
</div>
</div>
</td>
<td data-testid="dp-td-awardingEnd" class="css-vqalus">
<div data-testid="dp-field-awardingEnd" class="css-xd87ek">
<div class="css-mz7xyg">
Awarding End
</div>
<div>
09/20/2025 at 1200
</div>
</div>
</td>
<td data-testid="fields-table-data" class="css-1dyzhh5">
<div data-testid="details-panel-field-container" class="css-mz8kch">
<div>
<button data-testid="details-panel-field-awardAll" type="button" disabled="" id="button-awardAll" aria-labelledby="button-awardAll" class="css-ymhcit">
<span class="css-1oteowz">
<div data-testid="button-text-button-awardAll" class="css-rxxi15">
<div class="css-rqx7yd">
Award All
</div>
</div>
</span>
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

<img width="1265" alt="Screen Shot 2023-03-16 at 4 36 17 PM" src="https://user-images.githubusercontent.com/113629123/225758318-bd9c6db2-01f6-40df-b9af-9530c45a83a4.png">

As of now, we are using just plain playwright locators to click with the class name, but we want to use DOM library to select items from the combo box, can you please advise how that can be done using testing library?

await page.locator('.react-select__value-container').click();
await page.locator('#react-select-2-option-2').click();