How Create Reusable form components using react + react hooks form + yup

Question

I have InputGroup component which accepts props like placeholder,type, etc. i am trying to create a form using InputGroup component. This react app uses Yup , form Hook , ChakraUi and i use forwardRef but seems doesnt work

Also got error "Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef()."

InputGroup components.

import { Input, InputGroup, InputRightElement } from "@chakra-ui/react";
import { forwardRef } from "react";

const InputGroups = forwardRef(({ size, type, placeholder, icon }, ref) => {
  return (
    <InputGroup my={4} size={size}>
      <Input
        ref={ref}
        variant="filled"
        pr={10}
        type={type}
        placeholder={placeholder}
      />
      <InputRightElement>{icon}</InputRightElement>
    </InputGroup>
  );
});

export default InputGroups;

Login components.

import { useForm } from "react-hook-form";
import * as Yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

const schema = Yup.object().shape({
  personalNumber: Yup.number().required(),
  password: Yup.string().required(),
});

const Login = () => {
  const toast = useToast({
    containerStyle: {
      marginTop: "40px",
    },
  });
  const [show, setShow] = useState(false);
  const showPasswordHandleClick = () => setShow(!show);

  const { register, handleSubmit } = useForm({ resolver: yupResolver(schema) });

  const onSubmitHandler = data => {
    toast({
      title: "success message",
      status: "success",
      duration: 9000,
      isClosable: true,
      position: "top-right",
    });
    console.log(data);
  };

  return (

            <form
              className="login-form"
              style={{ textAlign: "Center" }}
              onSubmit={handleSubmit(onSubmitHandler)}
            >
              <InputGroups
                size="md"
                type="number"
                placeholder="Type Your Number Code"
                icon={
                  <i className="ki-duotone ki-sms">
                    <i className="path1"></i>
                    <i className="path2"></i>
                  </i>
                }
                ref={{ ...register }}
              />
              <InputGroups
                size="md"
                type={show ? "text" : "password"}
                placeholder="ُType Password..."
                icon={
                  <i className="ki-duotone ki-lock-2">
                    <i className="path1"></i>
                    <i className="path2"></i>
                    <i className="path3"></i>
                    <i className="path4"></i>
                    <i className="path5"></i>
                  </i>
                }
                // ref={{ ...register("personalNumber") }}
                ref={{ ...register }}
              >
                <InputLeftElement>
                  <Button fontSize={10} onClick={showPasswordHandleClick}>
                    {show ? "hide" : "show"}
                  </Button>
                </InputLeftElement>
              </InputGroups>

              <Button
                className="login-btn"
                type="submit"
                mt={10}
                colorScheme="teal"
                size="lg"
              >
              login
              </Button>
            </form>
 
  );
};

export default Login;