Uncaught Error: noUiSlider: Slider was already initialized

Question

I am using noUiSlider in my React Project to display distance and price. But, the problem is that when I call this component more than 1 time, it shows the following error:

Uncaught Error: noUiSlider: Slider was already initialized.
    at Object.initialize [as create] (nouislider.mjs:2254:15)
    at FilterTreatment.jsx:17:36
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
    at commitPassiveMountEffects (react-dom.development.js:24866:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:3)
    at flushPassiveEffects (react-dom.development.js:26984:14)
    at commitRootImpl (react-dom.development.js:26935:5)

Here's the code that I am using to initialise the Sliders:

useEffect(() => {
        // Initialize the slider
        const priceSlider = document.getElementById('price-slider');
        const minPriceValueElement = document.getElementById('min-price-value');
        const maxPriceValueElement = document.getElementById('max-price-value');
    
        const pSlider = noUiSlider.create(priceSlider, {
          start: [250, 500000], // Initial range
          connect: true, // Connect the handles
          step: 10, // Increment value
          range: {
            min: 250,
            max: 500000,
          },
        });

        pSlider.on('update', (values) => {
            // values[0] is the left handle value
            // values[1] is the right handle value
            minPriceValueElement.textContent = `₹${Math.round(values[0])}`;
            maxPriceValueElement.textContent = `₹${Math.round(values[1])}`;
        });

        const distanceSlider = document.getElementById('distance-slider');
    
        const dSlider = noUiSlider.create(distanceSlider, {
          start: [1, 80], // Initial range
          connect: true, // Connect the handles
          step: 10, // Increment value
          range: {
            min: 1,
            max: 200,
          },
        });

        const minDistanceValueElement = document.getElementById('min-distance-value');
        const maxDistanceValueElement = document.getElementById('max-distance-value');

        dSlider.on('update', (values) => {
            // values[0] is the left handle value
            // values[1] is the right handle value
            minDistanceValueElement.textContent = `${Math.round(values[0])} km`;
            maxDistanceValueElement.textContent = `${Math.round(values[1])} km`;
        });

        // Add event listeners or custom logic as needed
    
        // Cleanup when the component unmounts
        return () => {
          priceSlider.noUiSlider.destroy();
          distanceSlider.noUiSlider.destroy();
        };
      }, []);

Basically what I have done is created 2 components and in both of those components I want these 2 sliders, but I am able to call this slider component only once. If I try to call it more than once, I get the above error.