diff --git a/package.json b/package.json
index d95a275..39e30ec 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-firebase-hooks": "^2.2.0",
-    "react-hook-form": "^6.14.2",
+    "react-hook-form": "^7.3.6",
     "react-hot-toast": "^1.0.2",
     "react-markdown": "^5.0.3"
   }
diff --git a/pages/admin/[slug].js b/pages/admin/[slug].js
index c32ea45..8412500 100644
--- a/pages/admin/[slug].js
+++ b/pages/admin/[slug].js
@@ -7,7 +7,7 @@ import { useState } from 'react';
 import { useRouter } from 'next/router';
 
 import { useDocumentDataOnce } from 'react-firebase-hooks/firestore';
-import { useForm } from 'react-hook-form';
+import { useForm, useFormState } from 'react-hook-form';
 import ReactMarkdown from 'react-markdown';
 import Link from 'next/link';
 import toast from 'react-hot-toast';
@@ -55,9 +55,11 @@ function PostManager() {
 }
 
 function PostForm({ defaultValues, postRef, preview }) {
-  const { register, errors, handleSubmit, formState, reset, watch } = useForm({ defaultValues, mode: 'onChange' });
+  const { register, handleSubmit, reset, watch, formState: { errors }, control } = useForm({ defaultValues, mode: 'onChange' });
 
-  const { isValid, isDirty } = formState;
+  const { isValid, isDirty } = useFormState({
+    control
+  });
 
   const updatePost = async ({ content, published }) => {
     await postRef.update({
@@ -83,18 +85,17 @@ function PostForm({ defaultValues, postRef, preview }) {
         <ImageUploader />
 
         <textarea
-          name="content"
-          ref={register({
+          {...register("content", {
             maxLength: { value: 20000, message: 'content is too long' },
-            minLength: { value: 10, message: 'content is too short' },
-            required: { value: true, message: 'content is required' },
-          })}
+	    minLength: { value: 10, message: 'content is too short' },
+	    required: { value: true, message: 'content is required' },
+	  })}
         ></textarea>
 
         {errors.content && <p className="text-danger">{errors.content.message}</p>}
 
         <fieldset>
-          <input className={styles.checkbox} name="published" type="checkbox" ref={register} />
+          <input className={styles.checkbox} type="checkbox" {...register("published")} />
           <label>Published</label>
         </fieldset>