GetByRole Unable to find an accessible element with the role "listbox" and name - reactjs

Question

I have a Kendo dropdown on a react page as follows
<div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
<Label>CDN Code</Label>
<DropDownList
id="cdnCode-dropdown"
name="cdnCodeDD"
value={props.CdnCodeTxt}
onChange={handleChange}
data={componentState.cdnCodeList}
textField="text"
dataItemKey="id"
defaultItem={Constants.DefaultItem}
/>
</div>
and I have this react test code
test('renders cdncode dropdown', () => {
render(<ComponentDetailsContent />);
const element = screen.getByRole("listbox", {
name: "cdnCodeDD",
});
expect(element).toBeInTheDocument();
});
But when I run this test I get this error
TestingLibraryElementError: Unable to find an accessible element with the role "listbox" and name "cdnSicCodeDD"
It then goes on to list all the accessible roles and the name is blank for all of them.
Name "":
<span
aria-activedescendant="option-01abe0e8-1cc2-4ca2-ac35-d2a04f7dda62--1"
aria-expanded="false"
aria-haspopup="true"
aria-owns="0f6115c2-49f9-4430-bb2e-09841d34807b"
class="k-dropdown-wrap k-state-default"
id="cdnCode-dropdown"
role="listbox"
tabindex="0"
/>
Why is that even though my dropdown clearly has a name? I have also tried with "/cdncode/i" and I get the same error. I can't install Testing Playground plugin at work otherwise I would be able to tell the correct query for testing. Any alternatives that don't require chrome plugins?
Also, if I list out all the listboxes using GetAllByRoles I get the following array which contains the dropdown with the correct name?
[...
<select aria-hidden="true" name="cdnCodeDD" style="opacity: 0; width: 1px; border: 0px; z-index: -1; position: absolute; left: 50%;" tabindex="-1"><option value="[object Object]" /></select></span>]