fix: #139

src/components/Shuttle/Shuttle.tsx

@@ -56,10 +56,15 @@ export const Shuttle: React.FC<ShuttleProps> & Statics = ({
   children,
   ...rest
 }: ShuttleProps) => {
+  const counter = React.useRef(0);
   const { onClick: defaultClickHandler } = useShuttleItemClick({ setShuttleState, shuttleState });
 
   return (
-    <ShuttleContext.Provider value={{ shuttleState, setShuttleState }}>
+    <ShuttleContext.Provider
+      value={React.useMemo(
+        () => ({ shuttleState, setShuttleState, counter }),
+        [shuttleState, setShuttleState, counter]
+      )}>
       <div
         className={classNames(
           'shuttle',

src/components/Shuttle/ShuttleContainer.tsx

@@ -5,8 +5,6 @@ import { ShuttleContext } from './ShuttleContext';
 import { NUMBER_OF_CONTAINERS, SHUTTLE_CONTAINERS_ARRAY } from './globals';
 import { ShuttleState } from './hooks/useShuttleState';
 
-let id_int = 0;
-
 export type ShuttleContainerProps = {
   /**
    * Child render function of the Shuttle Container.
@@ -34,11 +32,11 @@ export const ShuttleContainer: React.FC<ShuttleContainerProps> = React.memo(
   // eslint-disable-next-line react/display-name
   React.forwardRef<HTMLDivElement, ShuttleContainerProps>(
     ({ children, className, ...rest }, ref) => {
-      const { shuttleState } = React.useContext(ShuttleContext);
+      const { shuttleState, counter } = React.useContext(ShuttleContext);
 
       // mod needed for HMR updates
       const id = React.useRef(
-        SHUTTLE_CONTAINERS_ARRAY[Math.floor(id_int++ % NUMBER_OF_CONTAINERS)]
+        SHUTTLE_CONTAINERS_ARRAY[Math.floor(counter.current++ % NUMBER_OF_CONTAINERS)]
       );
 
       /**

src/components/Shuttle/ShuttleContext.tsx

@@ -4,6 +4,7 @@ import { ShuttleState } from './hooks/useShuttleState';
 type ShuttleContextType = {
   shuttleState: ShuttleState;
   setShuttleState: React.Dispatch<Record<string, any>>;
+  counter: React.MutableRefObject<number>;
 };
 
 // @ts-ignore

src/components/Shuttle/__tests__/ShuttleContainer.test.tsx

@@ -1,26 +1,20 @@
-import * as React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
+import React from 'react';
+import { render, cleanup, screen } from '@testing-library/react';
 import { ShuttleContainer } from '../ShuttleContainer';
 
 afterEach(cleanup);
 
 describe('ShuttleContainer tests', () => {
-  it('should render', () => {
-    expect(() => {
-      render(<ShuttleContainer>{() => <p>hello</p>}</ShuttleContainer>);
-    }).not.toThrow();
-  });
-
   it('should contain data-name and other essential attributes', () => {
-    const { container, getByTestId } = render(
+    jest.spyOn(React, 'useContext').mockReturnValue({ counter: { current: 1 } });
+
+    const { container } = render(
       <ShuttleContainer data-testid="container">{() => <p>hello</p>}</ShuttleContainer>
     );
 
-    expect(getByTestId('container')).toHaveAttribute('data-name', 'target');
-    expect(getByTestId('container')).toHaveAttribute('role', 'listbox');
-    expect(getByTestId('container')).toHaveAttribute('tabindex', '0');
+    expect(screen.getByTestId('container')).toHaveAttribute('data-name', 'target');
+    expect(screen.getByTestId('container')).toHaveAttribute('role', 'listbox');
+    expect(screen.getByTestId('container')).toHaveAttribute('tabindex', '0');
 
     expect(container).toMatchSnapshot();
   });