How to use map function with react-quill without errors?

Question

I am setting up an admin portal, the admin portal can have an unlimited amount of steps input. Each step contains a title and a section of rich text in the form of an HTML string. At the moment my code works but I get this error when I use the arrows to increment the number of steps or if I input 10 or more steps into my input field.

Uncaught Error: You are passing the delta object from the onChange event back as value. You most probably want editor.getContents()

Looks like a React-Quill specific error but something makes me think the error is a side effect of bad code somewhere on my part.

Here is my code:

export const NewsArticlesPage = () => {

      const [numberOfSteps, setNumberOfSteps] = useState(0)
      //@ts-ignore
      const StepsMap = Array.apply(null, { length: numberOfSteps })
    
      let richText: any = { ...StepsMap }
      let title: any = { ...StepsMap }
    
      const updateTileArray = (index: number, titleEventData: string) => {
        const titleData = { ...title }
        title = { ...titleData, [index]: titleEventData }
        console.log(title[index])
      }
    
      const updateRichTextArray = (index: number, richTextEventData: string) => {
        const richTextData = { ...richText }
        richText = { ...richTextData, [index]: richTextEventData }
        console.log(richText[index])
      }
    
      const updateNewsArticleJson = () => {
        console.log(richText)
        console.log(title)
      }
    
      return (
        <NewsArticlesWrapper>
          <TextField
            type="number"
            label="Number of steps"
            value={numberOfSteps}
            InputProps={{ inputProps: { min: 0 } }}
            onChange={(e) => setNumberOfSteps(Number(e.target.value))}
          />
          {StepsMap.map((n, index) => (
            <>
              <Typography key={'heading' + index}>Step: {index + 1}</Typography>
              <TextField
                key={'title' + index}
                type="text"
                label="Title"
                value={title[index]}
                onChange={(titleEventData) =>
                  updateTileArray(index, titleEventData.target.value)
                }
              />
              <ReactQuill
                key={'quil' + index}
                theme="snow"
                value={richText[index]}
                modules={modules}
                onChange={(richTextEventData) =>
                  updateRichTextArray(index, richTextEventData)
                }
              />
            </>
          ))}
          <Button
            variant="contained"
            colour="primary"
            size="medium"
            onClick={updateNewsArticleJson}
          >
            Submit Article
          </Button>
        </NewsArticlesWrapper>
      )
    }

I understand the use of type any is bad but my priority is to get this working then I can add the correct types afterward.