How to use the bpk-component-rtl-toggle.updateOnDirectionChange function in bpk-component-rtl-toggle

import BpkBarchart, {
  BpkChartGridLines,
  BpkChartAxis,
  BpkChartMargin,
} from './index';

const getClassName = cssModules(STYLES);

const Heading = withDefaultProps(BpkText, {
  textStyle: 'lg',
  tagName: 'h1',
  className: getClassName('bpk-heading'),
});

const RtlBarchart = updateOnDirectionChange(BpkBarchart);
const SelectableBarChart = withSelectedState(RtlBarchart);

const data = require('./data');

const margin = {
  top: 0,
  left: 40, // eslint-disable-line backpack/use-tokens
  bottom: 40, // eslint-disable-line backpack/use-tokens
  right: 0,
};

const Gridlines = ({ size, ...rest }) => (
  <svg height="{size}" width="{size}" xmlns="http://www.w3.org/2000/svg">
    
      </svg>

import BpkNavigationBar, {
  BpkNavigationBarIconButton,
} from 'bpk-component-navigation-bar';
import BpkNavigationStack, {
  withNavigationStackState,
} from 'bpk-component-navigation-stack';
import BpkButton from 'bpk-component-button';
import { cssModules } from 'bpk-react-utils';

import STYLES from './NavigationStackPage.scss';

const getClassName = cssModules(STYLES);
const ArrowIconWithRtl = withRtlSupport(ArrowIcon);
const ArrowRightIconWithRtl = withRtlSupport(ArrowRightIcon);

const RtlAwareNavigationStack = updateOnDirectionChange(BpkNavigationStack);
export const StatefulNavigationStack = withNavigationStackState(
  RtlAwareNavigationStack,
);

const BarAndStack = ({
  views,
  pushView,
  popView,
  className,
}: {
  views: Array>,
  pushView: ?(Element) => mixed,
  popView: ?() => mixed,
  className: ?string,
}) => (
  <div></div>

import React from 'react';
import { cssModules } from 'bpk-react-utils';
import { storiesOf } from '@storybook/react';
import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';

import STYLES from './stories.scss';
import {
  View,
  SimpleNav,
  NavigationBar,
  withNavigationBar,
} from './stories-components';

import BpkNavigationStack, { withNavigationStackState } from './index';

const RtlAwareNavigationStack = updateOnDirectionChange(BpkNavigationStack);

const StatefulNavigationStack = withNavigationStackState(
  RtlAwareNavigationStack,
);

const NavigationStackWithBarOutside = withNavigationBar(
  RtlAwareNavigationStack,
);

const StatefulNavigationStackWithBarOutside = withNavigationStackState(
  NavigationStackWithBarOutside,
  false,
);

const getClassName = cssModules(STYLES);

import React from 'react';
import BpkLink from 'bpk-component-link';
import BpkBarchart from 'bpk-component-barchart';
import { onePixelRem } from 'bpk-tokens/tokens/base.es6';
import { withSelectedState } from 'bpk-component-barchart/hocs';
import barchartReadme from 'bpk-component-barchart/README.md';
import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';
import data from 'bpk-component-barchart/data.json';

import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import Paragraph from '../../components/Paragraph';
import IntroBlurb from '../../components/IntroBlurb';
import Code from '../../components/Code';

const EnhancedBarchart = updateOnDirectionChange(BpkBarchart);
const InteractiveBarchart = withSelectedState(EnhancedBarchart);

const components = [
  {
    id: 'default',
    title: 'Default',
    blurb: [
      By default, bar charts come with axis labels.,
    ],
    examples: [

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import BpkSlider from 'bpk-component-slider';
import sliderReadme from 'bpk-component-slider/README.md';
import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';

import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import Paragraph from '../../components/Paragraph';
import IntroBlurb from '../../components/IntroBlurb';

const EnhancedSlider = updateOnDirectionChange(BpkSlider);
const components = [
  {
    id: 'default',
    title: 'Default',
    blurb: [This is the default slider.],
    examples: [],
  },
  {
    id: 'large',
    title: 'Large',
    blurb: [
      This is a bigger version of the default slider.,
    ],
    examples: [],
  },
  {

<br>
      
    );
  }
}

const EnhancedSlider = updateOnDirectionChange(SliderContainer);

storiesOf('bpk-component-slider', module)
  .add('Simple slider', () =&gt; )
  .add('Simple large slider', () =&gt; )
  .add('Simple slider with steps', () =&gt; (
    
  ))
  .add('Range slider', () =&gt; )
  .add('Range slider with minimum distance', () =&gt; (
    
  ));

SliderContainer.propTypes = {
  min: PropTypes.number.isRequired,
  value: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.number),