View difference between Paste ID: 6F9vKuhp and 1muWcMDY

 // pages/cms/products/components/CMSProductForm.tsx
 import clsx from 'clsx';
-import { ChangeEvent, FormEvent, useState } from 'react';
+import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
 import { Product } from '@/model/product';
 
 export interface CMSProductFormProps {
   activeItem: Partial<Product> | null;
   onClose: () => void;
 }
 
 const initialState: Partial<Product> = {
   name: '', cost: 0, description: ''
 }
 
 export function CMSProductForm(props: CMSProductFormProps) {
   const [formData, setFormData] = useState(initialState);
 
   useEffect(() => {
     if (props.activeItem) {
       setFormData({ ...props.activeItem })
     }
   }, [props.activeItem])
 
   function changeHandler(e: ChangeEvent<HTMLInputElement>) {
     const name = e.currentTarget.value;
     setFormData(s => ({ ...s, name }))
   }
 
   function saveHandler(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     console.log(formData)
   }
 
   const isNameValid = formData.name?.length;
   const isValid = isNameValid;
 
   return (
     <div className={clsx(
       'fixed bg-slate-200 z-10 text-black top-0 w-96  h-full transition-all',
       {'-right-96': !props.activeItem, 'right-0': props.activeItem}
     )}>
 
       <form onSubmit={saveHandler}>
         <div className="flex justify-around h-16">
           <button
             className="text-white w-1/2 bg-green-500 hover:bg-green-600 disabled:opacity-30"
             disabled={!isValid}
             type="submit"
           >SAVE</button>
           <button
             className="text-white w-1/2 bg-slate-500 hover:bg-slate-600"
             onClick={props.onClose}
             type="button"
           >CLOSE</button>
         </div>
 
         <div className="flex flex-col gap-3 mx-3 mt-16">
           Product Name:
           <input
             className={clsx({ 'error': !isNameValid})}
             type="text" value={formData?.name} onChange={changeHandler}
           />
         </div>
       </form>
 
       {props.activeItem?.name}
 
     </div>
   )
 }