How to change the position of scalar bar on VTK.js

Hello Everyone I hope you are doing well

How can change the position of the scalar bar to be fixed to the bottom of the canvas
I tried to use the vtkScalarBarActor and set the bar position using the setBarPosition method but nothing change
Am I doing something wrong or it can’t be change?
this is my code related to that

.
.
.
const scalarBarActor = vtkScalarBarActor.newInstance();
        scalarBarActor.setBarPosition([100, -100]);
 scalarBarActor.setAxisLabel("settings");
        mapper.setColorByArrayName("colorMap");
        mapper.set({
          scalarMode: ScalarMode.USE_CELL_FIELD_DATA,
          lookupTable: lookupTable,
          colorByArrayName: "colorMap",
          salarVisibility: true,
        });

        const lut = mapper.getLookupTable();
        scalarBarActor.setScalarsToColors(lut);
        scalarBarActor.setDrawNanAnnotation(false);
        scalarBarActor.setTickTextStyle({
          fontColor: "black",
          fontFamily: "DM Sans",
        });
        scalarBarActor.setAxisTextStyle({
          fontColor: "black",
          fontFamily: "DM Sans",
        });
        renderer.addActor(scalarBarActor);
        actor.setMapper(mapper);
.
.
.

Thanks