Radio & Selects does not update user choices dynamiclly

[oscarthroedsson]

I´m trying to build a form and using react-hook-form. I have problem that my radio and select does not update the value in object i get from handleSubmit function.

I have built my own input components for: text, number, radio and select.

❗The problem is when the user choose an option in my select it register, but if the user then change the option they have chosen, react hook form does not register. The same is with my radio-input element.

This is how my Select component look when it is implemented
<Selectinput register={register} name="healthGoal" placeholderText="Choose goal" textContent={user ? user.Activitylevel.value : null} options={goals} // is array onSelect={handleHealthGoal} edit={forNewUser} forNewUser={forNewUser} />
This is how the component Selctinput is written:
`
export default function Selectinput({ register, onSelect, placeholderText, options, name, forNewUser, edit }) {
const [showDropdown, setShowDropDown] = useState(false);
const [placeholder, setPlaceholder] = useState(placeholderText);

return(

{ setShowDropDown((prevShowDropdow) => !prevShowDropdow); }} > {placeholder} {showDropdown && (

{options.map((option, index) => { return (
• { setPlaceholder(option.textContent); setShowDropDown(false); // Sends back the value

                    onSelect(option.value);
                  }}
                >
                  {option.textContent}
                </li>
              );
            })}
          </ul>
        )}
      </div>
      )}
  

  `

  The radio input looks when it is implemented:

  <Radiobutton register={register} name="useImperial" type="radio" textContent="Imperial" value={true} onClick={() => { setHealtConstants((prevState) => ({ ...prevState, useImperial: true, })); }} errors="" errorMsg="" checked={user ? user.isMale : healtConstants.useImperial} edit={edit} forNewUser={forNewUser} />
  This is how it looks inside:
  `import style from "./styleCheckbox.module.css";

  export default function Radiobutton({
  register,
  name,
  value,
  placeholder,
  min,
  onClick,
  onChange,
  onBlur,
  errors,
  errorMsg,
  required,
  type,
  checked,
  textContent,
  forNewUser,
  edit,
  }) {
  return (
  <>
  {forNewUser || edit ? (
  

  
  <label
  className={ text-sm ${ checked ? "border-px border-main bg-main text-white" : "border-[1px] border-[#616773] text-txtInput " } rounded-lg px-3 py-1 plabel flex justify-center w-full}
  >
  <input
  {...register(name, {
  minLength: min,
  onChange: () => (value = !value),
  onBlur: onBlur,
  setValueAs: (v) => Boolean(v),
  })}
  onClick={onClick}
  type={type}
  placeholder={placeholder}
  value={Boolean(value)}
  checked={checked}
  className={${style.CBinputEl} w-full text-txtInput}
  />
  {textContent ? textContent : "No text"}
  {errors[name] &&

  {errorMsg}

  }
  
  
  
  ) : (
  

  {textContent}

  
  )}
  </>
  );
  }
  `
  The goal is to make components that can be re-used. The reason for the state is visual effect as you can see I do conditionally CSS with tailwind.

  I send in the same name for the register to group them:
  `

  
  <Radiobutton
  register={register}
  name="useImperial" //<---
  type="radio"
  textContent="Metric"
  value={false}
  onClick={() => {
  setHealtConstants((prevState) => ({
  ...prevState,
  useImperial: false,
  }));
  }}
  errors=""
  errorMsg=""
  checked={user ? user.useImperial : !healtConstants.useImperial}
  edit={edit}
  forNewUser={forNewUser}
  />

        <Radiobutton
          register={register}
          name="useImperial" //<--- 
          type="radio"
          textContent="Imperial"
          value={true}
          onClick={() => {
            setHealtConstants((prevState) => ({
              ...prevState,
              useImperial: true,
            }));
          }}
          errors=""
          errorMsg=""
          checked={user ? user.isMale : healtConstants.useImperial}
          edit={edit}
          forNewUser={forNewUser}
        />
      </div>`
      I have no idea of which documentation to read to tackle this problem. Can´t find anything on the web-page that explain this well. 
      
      Thanks in advanced for reading and helping