So I am trying to call a graphql mutation with the useMutation hook and it is supposed to store a new record with a objectId reference to another collection in my mongodb.

const handleSubmit = async (e) => {
    e.preventDefault();
    const ticket = {
      ticketOwner: "60bd776e3e088a27ecae9dbb",
      venue: "Chase Center" 
    };
    console.log(ticket);
    try {
    await createTicket({variables: {ticket}});
    } catch (e) {
      console.log(e);
    }
    handleClose();
  }

the mutation is this snippet below and I have tested it on the playground to verify the server-side code is setup and running properly.

export const CREATE_TICKET = gql`
    mutation ($ticketOwner: ID!, $venue: String!) {
        createTicket(ticketOwner: $ticketOwner, venue: $venue) {
_id
venue}}`;

Everytime I execute the handlesubmit (button event handler) with my react front-end, I keep getting a 400 http://localhost:3000/graphql 400 (Bad Request) so I figured it might have to do with how I am passing in the id reference for the referenced collection. Does anyone have a better approach on how it should be handled from the front end? (Im aware its hardcoded for now for testing purposes.)