Cannot read property 'remove' of undefined using Typescript.

[ghost]

I'm trying to embed a p5.js sketch using this library in a project I'm working on.

The following sketch yields the following error:

index.js:47 TypeError: Cannot read property 'remove' of undefined
    at t.value (index.js:19)

import React, { Component } from "react"
import Sketch from "react-p5"

let particles_a: any[]
let particles_b: any[]
let particles_c: any[]
let nums = 200
let noiseScale = 800

export default class Processing extends Component {
  x = 50
  y = 50

  setup = ({ p5 }: any, { canvasParentRef }: any) => {
    p5.createCanvas(p5.windowWidth, p5.windowHeight).parent(canvasParentRef) // use parent to render canvas in this ref (without that p5 render this canvas outside your component)
    p5.background(21, 8, 50)
    for (var i = 0; i < nums; i++) {
      particles_a[i] = new Particle(
        p5.random(0, p5.windowWidth),
        p5.random(0, p5.windowHeight),
        p5
      )
      particles_b[i] = new Particle(
        p5.random(0, p5.windowWidth),
        p5.random(0, p5.windowHeight),
        p5
      )
      particles_c[i] = new Particle(
        p5.random(0, p5.windowWidth),
        p5.random(0, p5.windowHeight),
        p5
      )
    }
  }
  draw = ({ p5 }: any) => {
    p5.noStroke()
    p5.smooth()
    for (var i = 0; i < nums; i++) {
      var radius = p5.map(i, 0, nums, 1, 2)
      var alpha = p5.map(i, 0, nums, 0, 250)

      p5.fill(69, 33, 124, alpha)
      particles_a[i].move(p5)
      particles_a[i].display(radius, p5)
      particles_a[i].checkEdge(p5)

      p5.fill(7, 153, 242, alpha)
      particles_b[i].move(p5)
      particles_b[i].display(radius, p5)
      particles_b[i].checkEdge(p5)

      p5.fill(255, 255, 255, alpha)
      particles_c[i].move(p5)
      particles_c[i].display(radius, p5)
      particles_c[i].checkEdge(p5)
    }
  }

  render() {
    return <Sketch setup={this.setup} draw={this.draw} />
  }
}

class Particle {
  dir: any
  vel: any
  pos: any
  speed: any

  constructor(x: number, y: number, p5: any) {
    this.dir = p5.createVector(0, 0)
    this.vel = p5.createVector(0, 0)
    this.pos = p5.createVector(x, y)
    this.speed = 0.4
  }
  move = (p5: any) => {
    var angle =
      p5.noise(this.pos.x / noiseScale, this.pos.y / noiseScale) *
      p5.TWO_PI *
      noiseScale
    this.dir.x = p5.cos(angle)
    this.dir.y = p5.sin(angle)
    this.vel = this.dir.copy()
    this.vel.mult(this.speed)
    this.pos.add(this.vel)
  }

  checkEdge = (p5: any) => {
    if (
      this.pos.x > p5.windowWidth ||
      this.pos.x < 0 ||
      this.pos.y > p5.windowHeight ||
      this.pos.y < 0
    ) {
      this.pos.x = p5.random(50, p5.windowWidth)
      this.pos.y = p5.random(50, p5.windowHeight)
    }
  }

  display = (r: number, p5: any) => {
    p5.ellipse(this.pos.x, this.pos.y, r, r)
  }
}