How to integrate with an existing form in version 7?

[pedrojioc]

Hello everybody.
I come from working several projects with version 6 of RHF, in the current project I found version 7 so it is my first time with this version. And I am having a problem with my existing inputs.
I have a RadioButton component that looks like this:

export default function RadioButton ({ name, id, value, label, onChange, register, required = false }) {
  return (
    <label htmlFor={id}>
      <CheckAltIcon />
      <input
        type="radio"
        name={name}
        id={id}
        value={value}
        onChange={onChange}
        {...register(name, { required })}
      />
      {label}
    </label>
  )
}

And the parent component(Form) where it is called looks like this:

return (
    <form className={styles.Form} onSubmit={handleSubmit(onSubmit)}>
       <div className={styles.ControlGroup}>
           <label>Seleccionne una institución:</label>
           <div className={styles.RadioGroup}>
              {
                array && array.map(someItem => (
                  <RadioButton
                    key={someItem .id}
                    name="someName"
                    id={`field-${someItem .id}`}
                    value={someItem .id}
                    isChecked={selected=== someItem .id}
                    onChange={handleChange}
                    label={someItem .name}
                    register={register}
                    required
                  />
              ))
            }
         </div>
       </div>
</form>
)

I am following the instructions found in the documentation but I can't get this to work.
This throws me a type error:
Uncaught TypeError: register is not a function

If anyone can help me with this I really appreciate it.
Note: From what I've observed, the component appears to be losing reference in one of the renders.

[leapful]

@pedrojioc

Please provide a codesandbox sample to get more detail about the issue and some steps to re-produce if possible.

[pedrojioc]

I am not able to replicate in a sandbox, I can provide all the required screenshots and detail what is happening.

I have a page that renders a form component. On the page I obtain the necessary data to build the form, the data I obtain through a query to an API with a custom hook.
As you can see in the image, the data is sent to the Form component through Props.

Below the complete code of the Create.jsx page

Below the complete code of the custom hook useBootstrap.js

Below the complete code of the Form component Form.jsx
The error is occurring when rendering the RadioButton component, which is marked with the comment: // Error is happening here

Below the complete code of the RadioButton component RadioButton.jsx

This would be all my code.

Below is attached a screenshot of the console:

[bluebill1049]

Because ur own onChange is getting overwrite by 'registet' onChange. You will need to combine them

Sorry I am on my phone...

Const { onChange } = regist()

Input onChange={
onChange()
Props.onchange((

}

[pedrojioc]

Thank you for your answer.
The problem is that register is undefined, initially it is not, but after the custom hook "useBootstrap" does setBootstrapData, register becomes undefined.
The error is occurring with hardly any interaction with the inputs, it is not even able to render them due to the error

[pedrojioc]

Solution:
Add forwardRef when you have custom components of type Radio or Checkbox.
In the documentation it only indicates to add forwardRef to the select fields, but you must also do it for the aforementioned fields.
You should specify this type of behavior in the documentation to avoid wasting time.