how to select from the menu if the select is react-select

[aynuayex]

how to select from the menu if the select is react-select instead of the normal html select while using puppeteer:
this is how typically the react-select is implemented:

<div class="flex flex-col space-y-1 ">
<p class="font-semibold">Volume <span class="text-red">*</span></p>
<div class="text-emdmsPrimary  placeholder:text-N95 placeholder:text-sm    focus:border-emdmsPrimary focus:ring-emdmsPrimary w-3/4 rounded-md css-b62m3t-container">
<span id="react-select-2-live-region" class="css-7pg0cj-a11yText"></span>
<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" role="log" class="css-7pg0cj-a11yText"></span>
<div class=" css-vfyfn6-control">
<div class=" css-hlgwow"><div class=" css-9nn9n2-placeholder" id="react-select-2-placeholder">Select...</div><input id="react-select-2-input" tabindex="0" inputmode="none" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-activedescendant="" aria-readonly="true" aria-describedby="react-select-2-placeholder" class="css-1hac4vs-dummyInput" value="">
</div>
<div class=" css-1wy0on6">
<span class=" css-1u9des2-indicatorSeparator"></span>
<div class=" css-1xc3v61-indicatorContainer" aria-hidden="true">
<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>
</div>
</div>
</div>
<input name="volume_id" type="hidden" value="">
</div>
</div>

[aynuayex]

i have solved the problem, here is how you can interact with the select:

// 1. Click the dropdown to open the options
  await page.waitForSelector(".css-vfyfn6-control", { visible: true });
  await page.click(".css-vfyfn6-control");

  // 2. Wait for the dropdown menu to appear
  await page.waitForSelector(".css-lm8j94-menu", { visible: true });

  // 3. Select the desired option ("Weak")
  const desiredVolume = "Weak";
  await page.evaluate((text) => {
    const options = Array.from(
      document.querySelectorAll(".css-lm8j94-menu div")
    );
    const target = options.find((option) => option.textContent.trim() === text);
    if (target) {
      target.scrollIntoView();
      target.click();
    }
  }, desiredVolume);