Changing ground vertices causes body to start moving

[mr-moto]

I have a world with an enclosing static wall that im trying to make responsive. Currently im setting new vertices using setVertices for the top and bottom wall inside a resize event handler but by doing so causes all bodies in the world to start moving.

// module aliases
const Engine = Matter.Engine;
const Render = Matter.Render;
const Runner = Matter.Runner;
const Bodies = Matter.Bodies;
const Composite = Matter.Composite;
const Vertices = Matter.Vertices;
const Common = Matter.Common;
const Body = Matter.Body;

// create an engine
const engine = Engine.create();
const world = engine.world;

const canvasContainer = document.getElementById("canvas");
const canvasWidth = canvasContainer?.clientWidth;
const canvasHeight = 400;
const thickness = 60;

// create a renderer
const render = Render.create({
  element: canvasContainer,
  engine: engine,
  options: {
    width: canvasWidth,
    height: canvasHeight,
    background: "transparent"
  }
});


// shapes
const topWall = Bodies.rectangle(
  canvasWidth / 2,
  -thickness / 2,
  canvasWidth,
  thickness,
  {
    isStatic: true
  }
);

const bottomWall = Bodies.rectangle(
  canvasWidth / 2,
  canvasHeight + thickness / 2,
  canvasWidth,
  thickness,
  { isStatic: true }
);

const leftWall = Bodies.rectangle(
  -thickness / 2,
  canvasHeight / 2,
  thickness,
  canvasHeight,
  { isStatic: true }
);
const rightWall = Bodies.rectangle(
  canvasWidth + thickness / 2,
  canvasHeight / 2,
  thickness,
  canvasHeight,
  { isStatic: true }
);

const square = Bodies.rectangle(canvasWidth / 2, canvasHeight / 2, 150, 150, {
  render: {
    fillStyle: "#ABBEC4",
    strokeStyle: "#ABBEC4",
    lineWidth: 1
  },
});

// add all of the bodies to the world
Composite.add(world, [topWall, bottomWall, rightWall, leftWall, square]);

// run the renderer
Render.run(render);

// create runner
const runner = Runner.create();

// run the engine
Runner.run(runner, engine);

function handleResize() {
  const width = canvasContainer?.clientWidth;
  render.canvas.width = width;

  Body.setVertices(topWall, [
    Matter.Vector.create(0, thickness),
    Matter.Vector.create(width, thickness),
    Matter.Vector.create(width, 0),
    Matter.Vector.create(0, 0)
  ]);

  Body.setVertices(bottomWall, [
    Matter.Vector.create(0, thickness),
    Matter.Vector.create(width, thickness),
    Matter.Vector.create(width, 0),
    Matter.Vector.create(0, 0)
  ]);

  Body.setPosition(
    bottomWall,
    Matter.Vector.create(width / 2, canvasHeight + thickness / 2)
  );

  Body.setPosition(topWall, Matter.Vector.create(width / 2, -thickness / 2));

  Body.setPosition(
    rightWall,
    Matter.Vector.create(width + thickness / 2, canvasHeight / 2)
  );
}

window.addEventListener("resize", () => handleResize());

Is there a way around this?