How to set register in react-hook-form to component as prop in nextjs

Question

I have a register page with a form. I use custom components in the form. I choose react-hook-form library for validation. I want to set register as prop to custom components. I want to manage error messages in custom components. The page is:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import CustomButton from "../../components/ButtonComponent/CustomButton";
import CustomTextbox from "../../components/TextboxComponent/CustomTextbox";
import Style from "./Register.module.scss";
import Image from "next/image";
import { faUser } from '@fortawesome/free-regular-svg-icons';
import { useState } from "react";
import { useForm } from "react-hook-form";

export default Register;


function Register() {


const { register, handleSubmit, watch, formState: { errors } } = useForm();

const [username, setusername] = useState<string>();
const [password, setpassword] = useState<string>();

return (

    <div className={Style.main}>

    <div className={Style.mainRow + " row justify-content-center align-items-center d-flex"}>
        <div className="col-12 col-md-8 col-lg-8 col-xl-6 align-items-center text-center">

        <form onSubmit={handleSubmit(handleRegister)}>
            <div className="row align-items-center mt-4">
              <div className="col">
                <CustomTextbox register={register("userName", { required: true })} error={errors.userName && <span>Username is required</span>} customStyle={{ borderRadius: "5px", height: "44px" }} iconStyle={{ left: "8px !important", padding: "7px !important" }} icon={faUser} placeHolder="Username" onChange={setusername} value={username}></CustomTextbox>
              </div>
            </div>
            <div className="row align-items-center mt-4">
              <div className="col col-auto m-auto">
                <CustomButton type="submit" color="light" text="Continue" onClick={() => handleSubmit(handleRegister)}></CustomButton>
              </div>
            </div>
        </form>
        </div>
    </div>
    </div>


);
function handleRegister() {
    
  }
}

And the custom component:

import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useEffect, useState } from 'react'
import Style from './CustomTextbox.module.scss'
import Style from './CustomTextbox.module.scss'
import InputMask from "react-input-mask"
import { FieldValues, RegisterOptions, UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';

interface Props {
    onChange: (e: string) => void
    placeHolder?: string;
    value?: string;
    disabled?: boolean;
    customStyle?: React.CSSProperties;
    readonly?: boolean;
    mask?: string;
    register?: UseFormRegisterReturn;
    error?: Element;
}

const CustomTextbox: React.FC<Props> = ({
    onChange,
    placeHolder,
    value,
    disabled,
    customStyle,
    readonly,
    mask,
    register,
    error,

}) => {
    const [componentValue, setcomponentValue] = useState('')

    useEffect(() => {
        setcomponentValue(value != undefined ? value : '')
    }, [])

    useEffect(() => {
         onChange(componentValue != undefined ? componentValue : '')
    }, [componentValue])

    return (
        
                <InputMask
                    {...(register)}
                    type={"text"}
                    placeholder={placeHolder}
                    onChange={(event) => onChange(event.target.value)}
                    value={value}
                    disabled={disabled}
                    style={customStyle}
                    className={disabled ? Style.disabled : Style.textBox}
                    readOnly={readonly}
                    mask={mask != undefined ? mask : ""}
                ></InputMask>
                <>{error}</>
        
    );
}

CustomTextbox.defaultProps = {
    placeHolder: "Insert the text",
    disabled: false,
    readonly: false
}

export default CustomTextbox

It looks like I passed to register to component as prop. But it is not working. How can I fix that?