How to use npm pkg components like react-country-region-selector with react-hook-form

[freedomfflow]

Using React, Mui5, & v7 of react-hook-form

I'm using "react-country-region-selector" npm package for a country & region drop down selection. I'm unable to figure out how to use them within React-hook-form.
How can I wrap 3rd party components like this into the component imported from react-hook-form?
I'm fairly new to React and new to react-hook-form, so if there is an example I can mimic that you can point me to that would be wonderful.

[bluebill1049]

can you share a codesandbox? this should be able to solve with Controller by attach onChange, onBlur and value

[freedomfflow]

Well, I was wrong - this doesn't work, so if you have time perhaps you can assist?
I have to use 'useWatch' I believe, as the useState() is problematic to manage my onChange functions... either the onChange doesn't work or if it does, the value of country is not in my form data -- based on whether I pass it as a prop or not

Anyway, is there an example of how to use useWatch that involves a Controller as well to render my components?

I need to render and have the result of that selection be available to but I don't understand how to do this and I can't find any examples to copy.

Thanks

[freedomfflow]

You will laugh at me as I now think I have it working with useWatch --- I was WAAAAY over complicating things.... I started fresh, got rid of my useState, go rid of my event handlers, and simply wrapped the components in <Controller with just control and field, and it all works -- Everything I was doing was just interferring with how it works out of the box...

[freedomfflow]

and useWatch gives me the dependency I need between country and state -- so I don't have to manage anything -- just set up use watch and wrapped components in controller and I'm done -- 10 hours later -- haha

[bluebill1049]

I will take a look at today for you.

[bluebill1049]

looks like you forgot to save

[bluebill1049]

https://codesandbox.io/s/adoring-forest-5lbmr?file=/src/App.js

import { CountryDropdown } from "react-country-region-selector";
import { useForm, Controller } from "react-hook-form";

import "./styles.css";

export default function App() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      test: ""
    }
  });

  return (
    <form
      onSubmit={handleSubmit((data) => {
        console.log(data);
      })}
    >
      <Controller
        name="test"
        render={({ field: { name, onChange, value } }) => (
          <CountryDropdown
            defaultOptionLabel="Select Country"
            name={name}
            value={value}
            onChange={onChange}
          />
        )}
        control={control}
      />
      <button>submit</button>
    </form>
  );
}