How to use the react-with-direction/dist/DirectionProvider.DIRECTIONS.RTL function in react-with-direction

top: 20,
          }}
        />
      );
    }
    PitComponent.propTypes = {
      style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
      children: PropTypes.number,
    };
    PitComponent.defaultProps = {
      style: null,
      children: null,
    };

    return (
      <DirectionProvider direction={DIRECTIONS.RTL}>
        <LabeledSlider
          pitComponent={PitComponent}
          pitPoints={[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100]} // eslint-disable-line max-len
          snap
          snapPoints={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
          values={[40, 80]}
        />
      </DirectionProvider>
    );
  })
  .add('RTL Custom Handle', () => {

.add('with DirectionProvider', withInfo()(() => (
    <DirectionProvider direction={DIRECTIONS.RTL}>
      <DateRangePickerWrapper
        startDatePlaceholderText="تاریخ شروع"
        endDatePlaceholderText="تاریخ پایان"
        anchorDirection={ANCHOR_RIGHT}
        showDefaultInputIcon
        showClearDates
        isRTL
      />
    </DirectionProvider>
  )))
  .add('vertical with custom height', withInfo()(() => (

.add('vertical with DirectionProvider', withInfo()(() => (
    <DirectionProvider direction={DIRECTIONS.RTL}>
      <DayPicker
        numberOfMonths={2}
        orientation={VERTICAL_ORIENTATION}
        isRTL
      />
    </DirectionProvider>
  )))
  .add('vertically scrollable with DirectionProvider', withInfo()(() => (

.add('with DirectionProvider', withInfo()(() => (
    <DirectionProvider direction={DIRECTIONS.RTL}>
      <SingleDatePickerWrapper
        placeholder="تاریخ شروع"
        anchorDirection={ANCHOR_RIGHT}
        showDefaultInputIcon
        showClearDate
        isRTL
      />
    </DirectionProvider>
  )))
  .add('vertical with custom height', withInfo()(() => (