Why itemcategories and subcategory is always Fiction when update product is clicked
```
const UpdateProduct = () => {
	const [enterName, setEnterName] = useState("");
	const [enterDescription, setEnterDescription] = useState("");
	const [enterPrice, setEnterPrice] = useState("");
	const [enterQuantity, setEnterQuantity] = useState("");
	const [enterProductImg, setEnterProductImg] = useState([]);
	const [loading, setLoading] = useState(false);
	const [categories, setCategories] = useState([]);
	const [enterCategory, setEnterCategory] = useState("");
	const [enterSubcategory, setEnterSubcategory] = useState("");
	const [itemTag, setItemTag] = useState([]);
	const [gender, setGender] = useState("");
	const [size, setSize] = useState("");
	const { id } = useParams();

	useEffect(() => {
		const fetchCategories = async () => {
			const querySnapshot = await getDocs(collection(db, "categories"));
			const categoriesData = [];
			querySnapshot.forEach((doc) => {
				categoriesData.push({ id: doc.id, ...doc.data() });
			});
			setCategories(categoriesData);
		};
		fetchCategories();
	}, []);

	useEffect(() => {
		const fetchProduct = async () => {
			const docRef = doc(db, "Products", id);
			const docSnap = await getDoc(docRef);

			if (docSnap.exists()) {
				console.log("Document data:", docSnap.data());
				setEnterCategory(docSnap.data().itemcategories);
				setEnterSubcategory(docSnap.data().subcategory);
				setEnterName(docSnap.data().itemname);
				setEnterDescription(docSnap.data().itemdesc);
				setEnterPrice(docSnap.data().price);
				setEnterQuantity(docSnap.data().quantity);
				setEnterProductImg(docSnap.data().imgurl || []);
				setItemTag(docSnap.data().itemtag || []);
				setGender(docSnap.data().gender || "");
				setSize(docSnap.data().sizes || "");
			} else {
				// docSnap.data() will be undefined in this case
				console.log("No such document!");
			}
		};
		fetchProduct();
	}, []);

	function handleItemTagChange(e) {
		const newValue = e.target.value;
		if (itemTag.includes(newValue)) {
			setItemTag(itemTag.filter((value) => value !== newValue));
		} else {
			setItemTag([...itemTag, newValue]);
		}
	}

	const handleCategoryChange = (e) => {
		const selectedCategory = e.target.value;
		const category = categories.find(
			(category) => category.category === selectedCategory
		);
		if (category) {
			setEnterCategory(category.category);
			setEnterSubcategory(category.subcategories[0]);
		} else {
			setEnterCategory("");
			setEnterSubcategory("");
		}
	};

	const renderSubcategories = () => {
		const category = categories.find(
			(category) => category.category === enterCategory
		);
		if (category) {
			return category.subcategories.map((subcategory) => (
				<option key={subcategory} value={subcategory}>
					{subcategory}
				</option>
			));
		} else {
			return null;
		}
	};

	const navigate = useNavigate();

	const updateProduct = async (e) => {
		e.preventDefault();
		setLoading(true);

		try {
			const docRef = doc(db, "Products", id);
			const downloadURLs = [];

			// Loop over each selected image
			for (let i = 0; i < enterProductImg.length; i++) {
				const file = enterProductImg[i];
				const storageRef = ref(
					storage,
					`productImages/${Date.now() + "_" + file.name}`
				);
				const uploadTask = uploadBytesResumable(storageRef, file);

				uploadTask.on(
					"state_changed",
					(snapshot) => {
						const progress =
							(snapshot.bytesTransferred / snapshot.totalBytes) *
							100;
						console.log("Upload is " + progress + "% done");
					},
					(error) => {
						console.log(error);
						toast.error("Error uploading image");
						setLoading(false);
					},
					async () => {
						const downloadURL = await getDownloadURL(
							uploadTask.snapshot.ref
						);
						downloadURLs.push(downloadURL);

						// Check if all images have been uploaded
						if (downloadURLs.length === enterProductImg.length) {
							// Update the product document with the download URLs
							await updateDoc(docRef, {
								itemname: enterName,
								itemdesc: enterDescription,
								price: enterPrice,
								quantity: enterQuantity,
								itemtag: itemTag,
								itemcategories: enterSubcategory,
								gender: gender,
								size: size,
								imgurl: downloadURLs,
							});
							toast.success("Product successfully uploaded!");
							setLoading(false);
							navigate("/dashboard/all-products");
						}
					}
				);
			}
		} catch (error) {
			console.log(error);
			toast.error("Error updating product");
			setLoading(false);
		}
	};

	return (
		<section>
			<Container>
				<Row>
					<Col lg="12">
						{loading ? (
							<h4 className="py-5">Loading......</h4>
						) : (
							<>
								<h4 className="mb-5">Update Product</h4>
								<Form onSubmit={updateProduct}>
									<FormGroup className="form__group w-50">
										<span>Category</span>
										<select
											className="w-100 p-2"
											value={enterCategory}
											onChange={handleCategoryChange}
											required
										>
											<option>Select category</option>
											{categories.map((category) => (
												<option
													key={category.id}
													value={category.category}
												>
													{category.category}
												</option>
											))}
										</select>
									</FormGroup>
									{enterCategory && (
										<FormGroup className="form__group w-50">
											<span>Subcategory</span>
											<select
												className="w-100 p-2"
												value={enterSubcategory}
												onChange={(e) =>
													setEnterSubcategory(
														e.target.value
													)
												}
												required
											>
												{renderSubcategories()}
											</select>
										</FormGroup>
									)}