How to balance two squares on a see saw in matter.js?

I have two boxes sitting on a rectangle that I want to balance on a 2D rectangle that acts like a see-saw.

   World.add(engine.world, [
        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
    ]);

    var boxA = Bodies.rectangle(283.6, 480, 80, 80, { density: 0.005 });
    var boxB = Bodies.rectangle(520, 480, 80, 80, { density: 0.005});

    var arrow = Vertices.fromPath('40 0 40 20 100 20 100 80 40 80 40 100 0 50'),
        chevron = Vertices.fromPath('100 0 75 50 100 100 25 100 0 50 25 0'),
        star = Vertices.fromPath('50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38'),
        horseShoe = Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7');
        var catapult = Bodies.rectangle(400, 520, 320, 20, { friction: 0.5, collisionFilter: { group: group } });


    var group = Body.nextGroup(true);
World.add(engine.world, [
    catapult,
    boxA,
    boxB,
    Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
    Constraint.create({ 
        bodyA: catapult, 
        pointB: Vector.clone(catapult.position),
        stiffness: 1,
        length: 0
    })
]);

I adapted it from http://brm.io/matter-js/demo/#catapult and removed a lot of the objects I felt weren't necessary.

I would like to get the objects to balance perfectly, but the issue is the boxes seem to always be sliding. How can I make it so that when the boxes are equal weights that they can balance perfectly, and if I adjust the weight of one side, the see-saw can lean towards the other weight, but not slide off the see-saw? I would prefer if the see-saw weren't overly sensitive to the weight.

from How to balance two squares on a see saw in matter.js?