React-hook-form で Array & Conditional Fields を組み合わせた際にエラーがでる

以下のSampleページを参照しながら
チェックボックスにチェックを入れた際に
Array形式で入力できるようなフォームを作成中なのですが
見よう見まねで書いたためかと思いますが
エラーが出てしまいます。。。

https://codesandbox.io/s/6j1760jkjk
https://codesandbox.io/s/13ykqx4wx7

Failed to compile.

./src/index.js
  Line 77:7:  Parsing error: Unexpected token, expected ","

  75 |           </button>
  76 |         </div>
> 77 |       }
     |       ^
  78 |       )}
  79 |       <input type="submit" />
  80 |     </form>

どのあたりを修正すべきか
ご教示いただければ幸いです。。。
よろしくお願いいたします。

以下、コードを記載します。

index.js

     1  import React from "react";
     2  import ReactDOM from "react-dom";
     3  import { useForm } from "react-hook-form";
     4
     5  import "./index.css";
     6
     7  function App() {
     8    const { register, watch, handleSubmit } = useForm();
     9    const onSubmit = data => {
    10      alert(JSON.stringify(data));
    11    };
    12
    13    const moreDetail = watch("moreDetail");
    14    const [indexes, setIndexes] = useState([]);
    15    const [counter, setCounter] = useState(0);
    16
    17    const addFriend = () => {
    18      setIndexes(prevIndexes => [...prevIndexes, counter]);
    19      setCounter(prevCounter => prevCounter + 1);
    20    };
    21
    22    const removeFriend = index => () => {
    23      setIndexes(prevIndexes => [...prevIndexes.filter(item => item !== index)]);
    24      setCounter(prevCounter => prevCounter - 1);
    25    };
    26
    27    return (
    28      <form onSubmit={handleSubmit(onSubmit)}>
    29        <label htmlFor="firstName">First Name</label>
    30        <input name="firstName" placeholder="Bill" ref={register} />
    31        <label htmlFor="lastName">Last Name</label>
    32        <input name="lastName" placeholder="Luo" ref={register} />
    33        <label htmlFor="email">Email</label>
    34        <input
    35          name="email"
    36          placeholder="hello@testmail.com"
    37          type="email"
    38          ref={register}
    39        />
    40        <label htmlFor="lastName">More Details</label>
    41        <input name="moreDetail" type="checkbox" ref={register} />
    42
    43        {moreDetail && (
    44          <div>
    45            {indexes.map(index => {
    46              const fieldName = `friends[${index}]`;
    47              return (
    48                <fieldset name={fieldName} key={fieldName}>
    49                  <label>
    50                    First Name {index}:
    51                    <input
    52                      type="text"
    53                      name={`${fieldName}.firstName`}
    54                      ref={register}
    55                    />
    56                  </label>
    57
    58                  <label>
    59                    Last Name {index}:
    60                    <input
    61                      type="text"
    62                      name={`${fieldName}.lastName`}
    63                      ref={register}
    64                    />
    65                  </label>
    66                  <button type="button" onClick={removeFriend(index)}>
    67                    Remove
    68                  </button>
    69                </fieldset>
    70              );
    71            })}
    72
    73            <button type="button" onClick={addFriend}>
    74              Add Friend
    75            </button>
    76          </div>
    77        }
    78        )}
    79        <input type="submit" />
    80      </form>
    81    );
    82  }
    83
    84  const rootElement = document.getElementById("root");
    85  ReactDOM.render(<App />, rootElement);
    86