Gutenberg blocks array of objects

I am trying to create a repeater field where you can upload an image and add some text over it. You can then click a button to add another slide basically where you can repeat by adding another image with some text over it. Everything is working except the text bit. I don’t know how to save it or update it inside the array. So currently the images save and pressing the button adds a new slide but I can’t get the text to save.

I don’t know if what I am trying to do is correct. I am wanting to add the slide text typed in into the array which holds the image info so it is an array of objects (one object with the image data like url etc. and another with the slide title.

I have been playing with this for hours now and am just making it worse as I get more tired!

  attributes: {
    slides: {
      type: "array",
      default: [""],
      query: {
        slideTitle: {
          type: "string",
        },
      },
    },
  },

  edit: (props) => {
    const {
      attributes: { slides },
      setAttributes,
    } = props;
    return (


          <div className="swiper-container">
            <div className="swiper-wrapper">
              {slides.map((slide, index) => (
                <div className="swiper-slide">
                  <div className="image">
                    <RichText
                      placeholder="Title"
                      tagName="h2"
                      onChange={(value) => {
                        const newSlideTitle = slides.concat([]);
                        newSlideTitle[index] = value;
                        setAttributes({ slideTitle: newSlideTitle });
                      }}
                      value={slide.slideTitle}
                    />
                    <img src={slide.url}></img>
                    <MediaUpload
                      onSelect={(newValue) => {
                        const newImages = slides.concat([]);
                        newImages[index] = newValue;
                        setAttributes({ slides: newImages });
                      }}
                      type="image"
                      render={({ open }) => (
                        <IconButton
                          onClick={open}
                          icon="format-image"
                          showTooltip="true"
                          label="Add Image"
                        />
                      )}
                    />
                  </div>
                </div>
              ))}
            </div>
            <div className="swiper-button-prev"></div>
            <div className="swiper-button-next"></div>
          </div>
          <Button
            isPrimary
            onClick={() => {
              setAttributes({ slides: props.attributes.slides.concat([""]) });
            }}
          >
            Add slide
          </Button>
    );
  },