Unable to update parent XState machine context from child component

Question

I'm building a website builder application using React and XState. I have a parent component (SkinsController) that uses a state machine (bookmarkMachine) to manage the state of bookmarks. I also have a child component (Editor) that has its own state machine (editorMachine) and is used to edit the properties of a bookmark.

When a user saves their changes in the Editor, I want to send an event to the bookmarkMachine to create a new bookmark with the updated properties. However, I'm having trouble updating the bookmarkMachine context from the Editor component.

Here's a simplified version of my code:

import { assign, createMachine } from "xstate";

export const bookmarkMachine = createMachine({
  id: "bookmark",
  initial: "idle",
  context: {
    bookmarks: [],
  },
  states: {
    idle: {
      on: {
        CREATE_BOOKMARK: {
          actions: assign((context, event) => {
            const newBookmark = {
              id: event.id,
              inputValue: event.inputValue,
              hState: event.hState,
              satState: event.satState,
              liState: event.liState,
              imageURL: event.imageURL,
            };
            context.bookmarks.push(newBookmark);
          }),
        },
      },
    },
  },
});

import React, { useState } from "react";
import Editor from "./Editor";
import { useMachine } from "@xstate/react";
import { bookmarkMachine } from "../machines/bookmarkMachine";

export default function SkiController() {
  const [component, setComponent] = useState(null);
  const [state, send] = useMachine(bookmarkMachine);
  const handleClick = (componentNumber) => {
    setComponent(componentNumber);
  };

  return (
    <div className="sController">
      <div className="leftContainer">
        {component === 1 && <Editor sendBookmarks={send} />}
      </div>
    </div>
  );
}

import React from "react";
import { useMachine } from "@xstate/react";
import Rename from "./Rename";
import { editorMachine } from "../machines/editorMachine";

const Editor = ({ sendBookmarks }) => {
  const [state, send] = useMachine(editorMachine);
  const handleOpenRename = () => send("OPEN_RENAME");
  const handleCloseRename = () => send("CLOSE_RENAME");

  const handleSaveName = async (newName) => {
    send({ type: "SAVE_NAME", value: newName });

    sendBookmarks({
      type: "CREATE_BOOKMARK",
      id: newName,
      inputValue: newName,
      hState: state.context.hState,
      satState: state.context.satState,
      liState: state.context.liState,
    });
  };

  return (
    <div className="Editor draggable">
      <button onClick={handleOpenRename}>Rename</button>
      <Rename
        isOpen={state.matches("renaming")}
        onClose={handleCloseRename}
        onSave={handleSaveName}
      />
    </div>
  );
};

export default Editor;

When I try to save the changes in the Editor, I expect the bookmarkMachine context to be updated with the new bookmark. However, the context is not being updated and I'm not seeing any errors.

How can I update the bookmarkMachine context from the Editor component?

When a user saves their changes in the Editor, I want to send an event to the bookmarkMachine to create a new bookmark with the updated properties. However, I'm having trouble updating the bookmarkMachine context from the Editor component.

When I try to save the changes in the Editor, I expect the bookmarkMachine context to be updated with the new bookmark. However, the context is not being updated and I'm not seeing any errors.

How can I update the bookmarkMachine context from the Editor component?