React Hook Formで別ファイルのReact-Selectの値を取得したいです。

前提・実現したいこと

React HooK Formのwatchを用いて、別ファイルで作成したReact-Selectのコンポーネントの値を取得したいです。

発生している問題・エラーメッセージ

wacthやgetvaluesのボタンを押しても空の｛｝が返ってくるだけで、値が取得できません。
※同じファイルに書き込んでいると取得できます。

![イメージ説明](5b536595b86b0b32cc5ba2f2500d7487.png)
上記画像の下のセレクトボックスで選択したものをwatchもgetValueすると{}となります。

理想は下記画像のように、セレクトボックスで選択したものをwatchもgetValueするとコンソールで表示されるように取得したいです。
画像にある上のセレクトボックスは同じファイルにReact-selectを記述しています。
![イメージ説明](509582c42a6e28de2686d4879d027cde.png)

該当のソースコード

Selectbox.tsx

React.js
1import Select from "react-select";
2
3interface SelectboxProps {
4  optionList: Array<{ value: number; label: string }>;
5  onChange: (...event: any[]) => void;
6  labelTitle: string;
7  component: any;
8  name: string;
9  value: string;
10}
11
12interface CutomOptionProps {
13  innerRef: () => any;
14  innerProps: () => any;
15}
16
17const CustomOption: React.FC<CutomOptionProps> = ({ innerRef, innerProps }) => (
18  <div ref={innerRef} {...innerProps} />
19);
20
21export default function Selectbox(props: SelectboxProps) {
22  const options = props.optionList.map((item, index) => {
23    return { value: item.value, label: item.label, key: index };
24  });
25
26  const onSubmit = (data: Object) => {
27    console.table(data);
28  };
29
30  return (
31    <div className="d-flex flex-column my-2">
32      <label
33        htmlFor={props.labelTitle}
34        className="d-flex justify-content-between"
35        style={{ fontSize: "12px" }}
36      />
37      {" "}
38      <Select
39        isMulti
40        options={options}
41        id={props.labelTitle}
42        name={props.labelTitle}
43        component={{ Option: CustomOption }}
44        onSubmit={onSubmit}
45      />
46    </div>
47  );
48}
49

test.tsx

import Selectbox from "./Selectbox";
import { useForm, Controller } from "react-hook-form";
import Select from "react-select";

export default function Test() {
  const { handleSubmit, watch, getValues, control } = useForm();
  const onSubmit = (data: Object) => {
    console.table(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <button
        type="button"
        onClick={() => console.log(JSON.stringify(watch()))}
      >
        watch
      </button>
      <button
        type="button"
        onClick={() => console.log(JSON.stringify(getValues()))}
      >
        getValues
      </button>

      <Controller
        name="test1"
        control={control}
        render={({ field }) => (
          <Select
            {...field}
            options={[
              { value: "chocolate", label: "Chocolate" },
              { value: "strawberry", label: "Strawberry" },
              { value: "vanilla", label: "Vanilla" },
            ]}
            isMulti
          />
        )}
      />

      <Controller
        name="test2"
        control={control}
        render={({ field: { onChange, value, name, ref } }) => (
          <Selectbox
            onChange={onChange}
            labelTitle="tear1"
            name={name}
            value={value}
            component={ref}
            optionList={[
              { value: 1, label: "abcde" },
              { value: 2, label: "12345" },
              { value: 3, label: "あいうえお" },
            ]}
          />
        )}
      />
    </form>
  );
}