1Password classing input element as a username field

I am developing a React web application. On one page, I have an input element which takes a value which has nothing to do with 1Password credential or form filling, yet 1Password adds its icon to the right hand side. When I click the icon, it's not even like it's trying to autofill my details as if it were a registration form, it clearly thinks it's a username field.

I realise I can add the parameter 'data-1p-ignore' to the element, but could someone explain why 1Password thinks this is a field it can autofill a username into? Is it simply because the id/name attribute has the string 'name'? I also would've assumed that autocomplete="off" would also have prevented 1Password from interacting with this element, but perhaps I'm wrong. I'd rather not have to add the 'data-1p-ignore' element to every field as this makes the code messy and just feels like a hack rather than a solution.

The element in question is below, which for what it's worth, is inside a <form> tag along with another field and a submit button. Since it's a React application, this is the generated markup:

<div
  role="group"
  data-slot="field"
  data-orientation="vertical"
  class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-col *:w-full [&>.sr-only]:w-auto"
>
  <label
    data-slot="label"
    class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
    for="mc_name"
    >Name</label
  ><input
    data-slot="input"
    class="h-9 w-full min-w-0 rounded-4xl border border-input bg-input/30 px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
    id="mc_name"
    autocomplete="off"
    value="Some value"
    name="mc_name"
  />
</div>

Thanks