react-hook-formで value.XXX の XXX を変数で表記したい

react-hook-formを使ったForm内で入力した値を使って
getValueした値をもとに条件付きrenderを実行するコードを作成中ですが
掲題のような記述ができずに苦戦しています。
目的は、配列でIDのような数値が振られていて
その数値ごとに条件チェックを行うようにすることです。
XXXの部分が変数になった場合に
values.hensu などとしても、ただの文字列になってしまいます・・・。
(hensu にセットされる文字列を直接記載して values.XXX とすると、値は正確に取れている状態です）

お分かりになる方がいらっしゃいましたら、ご教授お願いしますｍ

Sample1

import React, {useState} from 'react';
import { useForm } from "react-hook-form";
import { Grid } from '@material-ui/core';
import './address.css';
import Phone from './Phone';

function Address() {
  const {register, handleSubmit, getValues} = useForm();
  const [addresses, setAddresses] = useState(["address0"]);
  const [isPhone, setIsPhone] = useState([false])

  function addAddress() {
    const newAddresses = [...addresses];
    console.log("before", newAddresses, addresses, `address.${addresses.length}`);
    newAddresses.push(`address.${addresses.length}`);
    setAddresses(newAddresses);
    console.log(newAddresses, addresses, `address.${addresses.length}`);
  };

  function removeAddress(index) {
    if (addresses.length > 1) {
      const newAddresses = [...addresses];
      console.log("target", index);
      newAddresses.splice(index, 1);
      for (var i = index; i < newAddresses.length; i++) {
        newAddresses[i] = `address.${i}`;
      }
      setAddresses(newAddresses);
      console.log(newAddresses, addresses, `address.${addresses.length}`);
    }
  }

  function setPhone(index) {
    const newPhone = [...isPhone];
    newPhone[index] = true;
    setIsPhone(newPhone);
  }

  return (
    <form onSubmit={handleSubmit()}>

      <h3>Address</h3>
      <button type="button" onClick={addAddress}>
        Add Address
      </button>
      {addresses.map((address, index) => {
        return (
          <div key={address}>
            <fieldset className="fieldset" name={address}>
              <Grid container>
                <Grid item xs={4}>
                  Address
                </Grid>
                <Grid item>
                  <input
                    type="text"
                    name={address}
                    size="40"
                    ref={register}
                  />
                </Grid>
              </Grid>

              <Grid container>
                <Grid item xs={4}>
                  Phone1 (Home)
                </Grid>
                <Grid item xs={4}>
                  <input
                    type="checkbox"
                    name={`${address}_phone1`}
                    ref={register}
                  />
                </Grid>
              </Grid>

              <Grid container>
                <Grid item xs={4}>
                  Phone2 (Mobile)
                </Grid>
                <Grid item xs={4}>
                  <input
                    type="checkbox"
                    name={`${address}_phone2`}
                    ref={register}
                  />
                </Grid>
              </Grid>

              <button onClick={() => setPhone(index)}>add Phone Info</button>
              {isPhone[index] &&
                <Phone register={register} values={getValues} address={`address${index}`} />
              }

            </fieldset>
            <button type="button" onClick={() => removeAddress(index)}>
              -
            </button>
          </div>
        )
      })}
    </form>
  )
}

export default Address;

Sample2

import React from 'react';
import "./input.css";
import { Grid } from '@material-ui/core';

const Phone = ({ register, watch, values, address }) => {
  const address_phone1 = `values.${address}_phone1`;
  const address_phone2 = `values.${address}_phone2`;
  console.log("phone1:", address, "value1: ", address_phone1, "value2: ", address_phone2);

  return (
    <div>
      <fieldset>
        <h3>Phone Info {address}</h3>

        {address_phone1 &&
          <Grid container>
            <Grid item xs={4}>
              Phone1
            </Grid>
            <Grid item>
              <input
                type="text"
                name={`${address}_phone1_number`}
                size="15"
                defaultValue="03-XXXX-XXXX"
                ref={register}
              />
            </Grid>
          </Grid>
        }

        {address_phone2 &&
          <Grid container>
            <Grid item xs={4}>
              Phone2
            </Grid>
            <Grid item>
              <input
                type="text"
                name={`${address}_phone2_number`}
                size="15"
                defaultValue="090-XXXX-XXXX"
                ref={register}
              />
            </Grid>
          </Grid>
        }


      </fieldset>
    </div>
  )
}

export default Phone;