Unable to use getByRole on listitem with a specific name - RTL

My apologies If this is a duplicate question. I couldn't find an answer anywhere else.

Component:

<ul>
  <li>Pending tasks</li>
</ul>

Test code:

expect(getByRole("listitem", { name: "Pending tasks" })).toBeInTheDocument();

Error:

TestingLibraryElementError: Unable to find an accessible element with the role "listitem" and name "Pending tasks"

Here's the codesandbox link to reproduce this: https://codesandbox.io/s/wandering-browser-mrf78?file=/src/App.test.js

Even though it shows error saying unable to find, it still suggests me li & ul tags as the available roles.

Here are the accessible roles:
 --------------------------------------------------
  list:

  Name "":
  <ul />

  --------------------------------------------------
  listitem:

  Name "":
  <li />

Could someone please explain what am I missing here? I tried using regex matchers but no luck.