Merge pull request #14 from faceless-ui/chore/nanoid

feat: implements useId hook

src/SliderProvider/index.tsx

@@ -1,5 +1,6 @@
 import React, {
   useEffect,
+  useId,
   useReducer,
   useRef,
   useState,
@@ -12,7 +13,6 @@ import { useBreakpoints } from './useBreakpoints';
 import { useMarquee } from './useMarquee';
 import { useAutoplay } from './useAutoplay';
 import { useScrollToIndex } from './useScrollToIndex';
-import { makeID } from '../makeID';
 
 export type ChildFunction = (context: ISliderContext) => React.ReactNode; // eslint-disable-line no-unused-vars
 
@@ -53,11 +53,8 @@ const SliderProvider: React.FC<SliderProviderProps> = (props) => {
   } = props;
 
   // NOTE: the 'aria-controls' attribute relies on this matching IDs
-  const [id, setID] = useState(() => idFromProps || makeID(5));
-
-  useEffect(() => {
-    setID(idFromProps || makeID(5));
-  }, [idFromProps])
+  const uniqueID = useId();
+  const id = idFromProps || uniqueID;
 
   const settings = useBreakpoints(props);