nouislider's handle not placed in correct position

I have initiated a new Next.js project and I am using the demo code from:
https://surveyjs.io/form-library/examples/custom-widget-nouislider/reactjs#content-code

But the handle is not placed in the correct position as shown in the photo. The following code is similar to the demo but with the changed nouislider.css directory at nouislider/dist.

JavaScript
"use client";
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/defaultV2.min.css";
import * as SurveyCore from "survey-core";
import noUiSlider from "nouislider";
import { nouislider } from "surveyjs-widgets";
import "nouislider/dist/nouislider.css";

const json = {
    elements: [
        {
            type: "nouislider",
            name: "range",
            title: "Please range",
        },
    ],
};

nouislider(SurveyCore);
function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return <Survey model={survey} />;
}

export default SurveyComponent;