I’m working on a WordPress theme with a custom block system. I have created a marquee block that allows to add and remove items dynamically. The block works fine when adding a single item, but when I add two or more, I get the following warning:

Block validation: Expected token of type EndTag(Object), instead sawStartTag (Object).

And this error:

Block validation: Block validation failed for `contracorrientestore/marquee-block` (Object).

Content generated by `save` function:

<div class="marquee"><div class="marquee-content"><p>Add item text</p></div></div>

Content retrieved from post body:

<div class="marquee"><div class="marquee-content"><p>Add item text</p><p>Add item text</p></div></div>

Is very strange, because in the editor when I added the items looks good, without problems
Editor viewer

But if I refresh the editor, I see in console the error and this error in the editor:
Editor Error

My code is:
marqueeBlock.js

const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.blockEditor || wp.editor;
const { PanelBody, TextControl, Button } = wp.components;

registerBlockType("contracorrientestore/marquee-block", {
  apiVersion: 2,
  title: "Marquesina",
  icon: "megaphone",
  category: "design",
  attributes: {
    content: {
      type: "array",
      source: "query",
      selector: ".marquee",
      query: {
        text: {
          type: "string",
          source: "html",
          selector: "p",
        },
      },
      default: [],
    },
  },
  edit: ({ attributes, setAttributes }) => {
    const { content } = attributes;

    const onChangeContent = (newText, index) => {
      const newContent = [...content];
      newContent[index] = { ...newContent[index], text: newText };
      setAttributes({ content: newContent });
    };

    const onAddItem = () => {
      setAttributes({ content: [...content, { text: "Add item text" }] });
    };

    const onDeleteItem = (index) => {
      const newContent = [...content];
      newContent.splice(index, 1);
      setAttributes({ content: newContent });
    };

    return (
      <>
        <InspectorControls>
          <PanelBody title="Items de Marquesina" initialOpen={true}>
            <Button isSecondary onClick={onAddItem}>
              Agregar Item
            </Button>
            {content.map((item, index) => (
              <div key={index} style={{ marginBottom: "10px" }}>
                <TextControl
                  label={`Item ${index + 1}`}
                  value={item.text}
                  onChange={(newText) => onChangeContent(newText, index)}
                />
                <Button isDestructive onClick={() => onDeleteItem(index)}>
                  Eliminar Item
                </Button>
              </div>
            ))}
          </PanelBody>
        </InspectorControls>
        <div className="marquee">
          <div className="marquee-content">
            {content.map((item, index) => (
              <p key={index}>{item.text}</p>
            ))}
          </div>
        </div>
      </>
    );
  },
  save: ({ attributes }) => {
    return (
      <div className="marquee">
        <div className="marquee-content">
          {attributes.content.map((item, index) => (
            <p key={index}>{item.text}</p>
          ))}
        </div>
      </div>
    );
  },
});

I need help here!
I haven’t found many solutions or examples about this block system… maybe it’s too new.

I tried to make a marquee in WordPress + React with FSE block system but I got an error in the editor.