Custom button to create new entry in collection

I'm experimenting with a workaround for a "content staging" feature I'm trying to implement. Essentially I need to put a custom button (either in the list or the document edit screen) that when clicked, creates a new entry in a different collection based on the data in current document. What's the best way to do that?

I've created the button with a UI field and tried using the local API to do this, but I get an error

. I think I'm not using it correctly, is this designed to only work with hooks? Should I use graphql instead? An entirely different approach?

Code below for the ui field custom component... any help/examples appreciated. Thanks!

import React from "react";
import { useDocumentInfo } from "payload/components/utilities";
import payload from "payload";

async function createStagePage(docData) {
  await payload.create({
    collection: "stagePage",
    data: {
      title: "testTitle",
    },
  });
}
type Props = { label: string };
const StageField: React.FC<Props> = (props) => {
  const docinfo = useDocumentInfo();
  const clickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    const returnObj = {
      fields: docinfo.collection.fields,
      id: docinfo.id,
    };
    createStagePage(returnObj);
  };
  return <button onClick={clickHandler}>Content Stage</button>;
};
export default StageField;