Fixed initial focus when the modal opens to the first enabled sticker button.

components/calender/modals/StickerSelector.tsx

@@ -7,6 +7,7 @@ interface StickerSelectorProps {
   currSticker: StickerVal;
   selectedSticker: StickerVal;
   updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  initialSticker: React.MutableRefObject<undefined>;
 }
 
 /**
@@ -21,7 +22,8 @@ const StickerSelector = ({
   stickerSet,
   currSticker,
   selectedSticker,
-  updateSelectedSticker
+  updateSelectedSticker,
+  initialSticker
 }: StickerSelectorProps): JSX.Element => {
   const stickers = {
     Demo: (
@@ -34,6 +36,7 @@ const StickerSelector = ({
       >
         <Button
           isDisabled={currSticker >= 1}
+          ref={currSticker <= 1 ? initialSticker : null}
           border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
           bg={selectedSticker === 1 && "gray.800"}
           onClick={() => updateSelectedSticker(1)}
@@ -43,6 +46,7 @@ const StickerSelector = ({
         </Button>
         <Button
           isDisabled={currSticker === 0}
+          ref={currSticker >= 1 ? initialSticker : null}
           border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
           bg={selectedSticker === 0 && "gray.800"}
           onClick={() => updateSelectedSticker(0)}