VoiceOver behavior is inconsistent on dropdown select options - accessibility

Question

I am currently working on the VoiceOver experience for a custom web component and I have come across an inconsistency in the VoiceOver behavior.
My custom web component functions as a dropdown select with options to choose from. In the below scenarios, I describe the varying behavior of VoiceOver. Thanks in advance for reading this.
Scenario 1:
The dropdown has 3 available options to choose from: Option 1, Option 2, Option 3
<custom-select label="Dropdown Label">
<custom-option value="Option 1">Option 1</custom-option>
<custom-option value="Option 2">Option 2</custom-option>
<custom-option value="Option 3">Option 3</custom-option>
</custom-select>
You select Option 2. This closes the pop-up and updates the dropdown component to display the option you've chosen
You then re-open the dropdown, focus jumps to the previously selected option (in this case Option 2, which now has a checkmark next to it), and VoiceOver says:
Checkmark. Option 2. Clickable. You are currently on a text element.
This is the VoiceOver behavior you will consistently get for any option that is not the last option in the list. The next scenario explains what happens there...
Scenario 2:
Again, 3 available options to choose from: Option 1, Option 2, Option 3
You select the last option, Option 3. This closes the pop-up and updates the dropdown component to display the option you've chosen
You then re-open the dropdown, focus jumps to the previously selected option (the checkmarked Option 3), and VoiceOver says:
Option 1. Option 2. Checkmark. Option 3. Clickable. You are currently on a text element.
So only when you choose the last option, the VoiceOver decides to read all of the options before getting to the one that has focus...
Relevant HTML:
The parent component contains a button which toggles a display div containing the dropdown options (the "slot" for nested components). I've stripped it down to the relevant attributes, classes and directives for presentation's sake (written in Svelte.js):
<button
type="button"
aria-required={ariaRequired}
aria-haspopup="listbox"
aria-label={ariaLabel}
aria-disabled={ariaDisabled}
aria-expanded={ariaExpanded}
on:click={toggleOptions}>
{display}
</button>
<div
tabindex="-1"
class:hidden={optionSelectVisable === false}>
<slot />
</div>
And then a nested, option component looks like this:
<div
on:click={dispatchOption}
role="option"
value={value}
id="option-{inputID}"
aria-selected={ariaSelected}
aria-disabled={ariaDisabled}
tabindex={tabindex}>
<div>
<custom-icon
type="checkmark"
aria-label="checkmark"
class:hidden={displayCheckmark === false}/>
</div>
<div>
<slot />
</div>
</div>
Rendered HTML (example w/ Option 1 checked):
<custom-select label="Dropdown Label">
→#shadow-root
<custom-option value="Option 1">
↓#shadow-root
<div
role="option"
aria-selected="true"
aria-disabled="false"
value="Option 1"
tabindex="0">...</div>
"Option 1"
<custom-option>
<custom-option value="Option 2">
↓#shadow-root
<div
role="option"
aria-selected="false"
aria-disabled="false"
value="Option 2"
tabindex="0">...</div>
"Option 2"
<custom-option>
<custom-option value="Option 3">
↓#shadow-root
<div
role="option"
aria-selected="false"
aria-disabled="false"
value="Option 3"
tabindex="0">...</div>
"Option 3"
<custom-option>
</custom-select>
Any help is greatly appreciated. Thank you.