focus render prop for Input (v2) not inherited

[anzuj]

I'm not sure whether it's a bug or if I've built my component wrong, so would appreciate a second set of eyes :)

I've made a component for the purpose of reusability, therefore I need to expose the hover & focus states to certain divs to visually show optional icons within the input field. This is what I came up with:

import { Input, Field, Label } from "@headlessui/react";
import React, { useState, Fragment } from "react";

function TextInput({
  name,
  type = "text",
  label,
  placeholder,
  startIcon,
  iconContainerClasses,
  inputClasses="w-full h-[50px] placeholder-black placeholder-opacity-100 rounded-md border  border-gray-200 py-[10px] pl-[35px] pr-[43px] focus:outline-none focus:border-black focus:ring-0 truncate",
}) {
  const defaultIconContainerClasses = `pointer-events-none absolute inset-y-0  flex items-center ${
    startIcon ? "left-0 pl-3" : "right-0 pr-3"
  } `;

  return (
    <Field>
      <div className="relative">
        {label && <Label>{label}</Label>}
        <Input as={Fragment}>
          {({ focus, hover }) => {
            return (
              <div className="relative">
                {startIcon && (
                  <div className={defaultIconContainerClasses + " " + iconContainerClasses}>
                    {startIcon({ focus, hover })}
                  </div>
                )}
                <input
                  name={name}
                  type={type}
                  className={inputClasses}
                  placeholder={placeholder}
                ></input>
              </div>
            );
          }}
        </Input>
      </div>
    </Field>
  );
}

export default TextInput;

I followed the syntax from the documentation but the "focus" prop doesn't seem to work while hover does.

I made a codesandbox here for the ease of testing: https://codesandbox.io/p/devbox/input-focus-bug-cf7c8h?file=%2Fsrc%2FInput.jsx%3A1%2C1-45%2C26

Any help would be appreciated!