Programmaticaly update an array field via a Custom Component

[immotus]

I have a collection with an upload field that has hasMany: true, like so:

{
	label: "Gallery",
	fields: [
		{
			type: "upload",
			name: "gallery",
			relationTo: "media",
			hasMany: true,
			admin: {
				components: {
					Label: "@/collections/posts/components/GalleryLabel.tsx",
				},
			},
		},
	],
}

The GalleryLabel.tsx has a link button that is meant to fetch some data from an API and populate this field:

"use client";
import React, { useCallback } from "react";
import { useField, useForm } from "@payloadcms/ui"
import { ArrayFieldClientProps } from "payload";


export const GalleryLabel: React.FC<ArrayFieldClientProps> = ({
	field,
	path,
}) =>
{
	const { value, setValue } = useField<string[]>({ path: path || field.name, hasRows: true });
	const { addFieldRow, removeFieldRow } = useForm();

	const handleRetrieve = useCallback(
		(e: any) =>
		{
			e.preventDefault();

			// Returns the current value, e.g.,
			// ['67bebc8851ae8a9a03586a60', '679d0764becbe05d60d62561', '679d04ebbecbe05d60d62217']
			console.log(value);

			// Doesn't work!
			value.push("67d15c4d8c8aef798f0cb466");
			setValue(value);

			// Clears up the whole field, even though it is supposed to remove just the first item.
			// removeFieldRow({
			// 	path: "gallery",
			// 	rowIndex: 0,
			// });

			// Any fiddling with the following didn't bring any positive results either.
			// 
			// addFieldRow({
			// 	path: "gallery",
			// 	schemaPath: "gallery",
			// 	rowIndex: 0, // optionally specify the index to add the row at
			// 	subFieldState: {
			// 		id: {
			// 			initialValue: "67d15c4d8c8aef798f0cb466",
			// 			valid: true,
			// 			value: "67d15c4d8c8aef798f0cb466",
			// 		},
			// 	},
			// });
		},
		[],
	);

	return (
		<div className="field-label">
			<label className="field-label" htmlFor={ field.name }>Gallery</label>
			&nbsp; — &nbsp;
			<button type="button" className="button-link" onClick={ handleRetrieve }>Auto-retrieve</button>
		</div>
	);
};

export default GalleryLabel;

The Auto-retrieve button, once clicked, shows the current value alright, but any attempt to setValue doesn't bring any luck. The most obvious and logical way would be just to use the provided setValue callback function, e.g.,

setValue([ "67d15c4d8c8aef798f0cb466" ]);

I didn't have any luck with the addFieldRow function, and a much more straightforward removeFieldRow doesn't behave as expected, e.g., the following code, instead of removing just the first item from the array, clears up the whole field (at least visually):

removeFieldRow({
	path: "gallery",
	rowIndex: 0,
});

So the question is, is it even possible to update array, relationship, or any other fields with hasMany: true programmatically?