diff --git a/src/components/garden/add-plant-button.tsx b/src/components/garden/add-plant-button.tsx
index bc06365..1cec26c 100644
--- a/src/components/garden/add-plant-button.tsx
+++ b/src/components/garden/add-plant-button.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -39,7 +39,6 @@ export function AddPlantButton() {
   const [suggestions, setSuggestions] = useState<PlantSuggestion[]>([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [category, setCategory] = useState<PlantCategory>("CANOPY_TREE");
-  const nameRef = useRef<HTMLInputElement>(null);
   const router = useRouter();
   const { toast } = useToast();
 
@@ -113,13 +112,13 @@ export function AddPlantButton() {
                 <Label htmlFor="commonName">What plant is it? *</Label>
                 <Input
                   id="commonName"
-                  ref={nameRef}
                   placeholder="Start typing — apple, comfrey, zinnia…"
-                  value={form.watch("commonName") ?? ""}
-                  onChange={(e) => onNameChange(e.target.value)}
+                  autoComplete="off"
+                  {...form.register("commonName", {
+                    onChange: (e) => onNameChange(e.target.value),
+                  })}
                   onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
                   onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
-                  autoComplete="off"
                 />
                 {form.formState.errors.commonName && (
                   <p className="text-xs text-destructive">{form.formState.errors.commonName.message}</p>