diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 65aa6587..ba2e89f6 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import React, { Fragment, SyntheticEvent, useEffect, useRef } from 'react';
-import { Ref, Segment } from 'semantic-ui-react';
+import * as SemanticUiReact from 'semantic-ui-react';
 import { Locale, RenderProps, SemanticDatepickerProps } from 'types';
 import { getShortDate, getToday } from '../../utils';
 import Button from '../button';
@@ -78,147 +78,153 @@ const Calendar: React.FC<CalendarProps> = ({
     }
   });
 
-  return (
-    <Ref innerRef={rootRef}>
-      <Segment
-        {...rootProps}
-        inverted={inverted}
-        className={cn('clndr-calendars-segment', {
-          'clndr-floating': !inline,
-          [pointings[pointing]]: !inline,
-        })}
+  const calendarInstance = (
+    <SemanticUiReact.Segment
+      {...rootProps}
+      {...(SemanticUiReact.Ref ? {} : { ref: rootRef })}
+      inverted={inverted}
+      className={cn('clndr-calendars-segment', {
+        'clndr-floating': !inline,
+        [pointings[pointing]]: !inline,
+      })}
+    >
+      <div
+        className="clndr-calendars-wrapper"
+        style={{ '--n': calendars.length } as React.CSSProperties}
       >
-        <div
-          className="clndr-calendars-wrapper"
-          style={{ '--n': calendars.length } as React.CSSProperties}
-        >
-          {calendars.map((calendar, calendarIdx) => (
-            <div key={`${calendar.year}-${calendar.month}`}>
-              <div className="clndr-control">
-                <div style={styles.leftBtn}>
-                  {calendarIdx === 0 && (
-                    <Fragment>
-                      <Button
-                        icon="angle double left"
-                        inverted={inverted}
-                        title={previousYear}
-                        type="button"
-                        {...getBackProps({
-                          calendars,
-                          'aria-label': previousYear,
-                          offset: 12,
-                          onClick: onPressBtn,
-                        })}
-                      />
-                      <Button
-                        icon="angle left"
-                        inverted={inverted}
-                        style={{ marginRight: 0 }}
-                        title={previousMonth}
-                        type="button"
-                        {...getBackProps({
-                          calendars,
-                          'aria-label': previousMonth,
-                          onClick: onPressBtn,
-                        })}
-                      />
-                    </Fragment>
-                  )}
-                </div>
+        {calendars.map((calendar, calendarIdx) => (
+          <div key={`${calendar.year}-${calendar.month}`}>
+            <div className="clndr-control">
+              <div style={styles.leftBtn}>
+                {calendarIdx === 0 && (
+                  <Fragment>
+                    <Button
+                      icon="angle double left"
+                      inverted={inverted}
+                      title={previousYear}
+                      type="button"
+                      {...getBackProps({
+                        calendars,
+                        'aria-label': previousYear,
+                        offset: 12,
+                        onClick: onPressBtn,
+                      })}
+                    />
+                    <Button
+                      icon="angle left"
+                      inverted={inverted}
+                      style={{ marginRight: 0 }}
+                      title={previousMonth}
+                      type="button"
+                      {...getBackProps({
+                        calendars,
+                        'aria-label': previousMonth,
+                        onClick: onPressBtn,
+                      })}
+                    />
+                  </Fragment>
+                )}
+              </div>
 
-                <span title={`${months[calendar.month]} ${calendar.year}`}>
-                  {months[calendar.month].slice(0, 3)} {calendar.year}
-                </span>
+              <span title={`${months[calendar.month]} ${calendar.year}`}>
+                {months[calendar.month].slice(0, 3)} {calendar.year}
+              </span>
 
-                <div style={styles.rightBtn}>
-                  {calendarIdx === calendars.length - 1 && (
-                    <Fragment>
-                      <Button
-                        icon="angle right"
-                        inverted={inverted}
-                        title={nextMonth}
-                        type="button"
-                        {...getForwardProps({
-                          calendars,
-                          'aria-label': nextMonth,
-                          onClick: onPressBtn,
-                        })}
-                      />
-                      <Button
-                        icon="angle double right"
-                        inverted={inverted}
-                        style={{ marginRight: 0 }}
-                        title={nextYear}
-                        type="button"
-                        {...getForwardProps({
-                          calendars,
-                          'aria-label': nextYear,
-                          offset: 12,
-                          onClick: onPressBtn,
-                        })}
-                      />
-                    </Fragment>
-                  )}
-                </div>
+              <div style={styles.rightBtn}>
+                {calendarIdx === calendars.length - 1 && (
+                  <Fragment>
+                    <Button
+                      icon="angle right"
+                      inverted={inverted}
+                      title={nextMonth}
+                      type="button"
+                      {...getForwardProps({
+                        calendars,
+                        'aria-label': nextMonth,
+                        onClick: onPressBtn,
+                      })}
+                    />
+                    <Button
+                      icon="angle double right"
+                      inverted={inverted}
+                      style={{ marginRight: 0 }}
+                      title={nextYear}
+                      type="button"
+                      {...getForwardProps({
+                        calendars,
+                        'aria-label': nextYear,
+                        offset: 12,
+                        onClick: onPressBtn,
+                      })}
+                    />
+                  </Fragment>
+                )}
               </div>
-              <div className="clndr-days">
-                {weekdays.map((weekday) => (
-                  <CalendarCell
-                    key={`${calendar.year}-${calendar.month}-${weekday}`}
-                    inverted={inverted}
-                    aria-label={weekday}
-                    title={weekday}
-                  >
-                    {weekday.slice(0, 2)}
-                  </CalendarCell>
-                ))}
-                {calendar.weeks.map((week) =>
-                  week.map((dateObj, weekIdx) => {
-                    const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
+            </div>
+            <div className="clndr-days">
+              {weekdays.map((weekday) => (
+                <CalendarCell
+                  key={`${calendar.year}-${calendar.month}-${weekday}`}
+                  inverted={inverted}
+                  aria-label={weekday}
+                  title={weekday}
+                >
+                  {weekday.slice(0, 2)}
+                </CalendarCell>
+              ))}
+              {calendar.weeks.map((week) =>
+                week.map((dateObj, weekIdx) => {
+                  const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
 
-                    if (!dateObj) {
-                      return <CalendarCell key={key} inverted={inverted} />;
-                    }
+                  if (!dateObj) {
+                    return <CalendarCell key={key} inverted={inverted} />;
+                  }
 
-                    const selectable =
-                      dateObj.selectable && filterDate(dateObj.date);
-                    const shortDate = getShortDate(dateObj.date);
+                  const selectable =
+                    dateObj.selectable && filterDate(dateObj.date);
+                  const shortDate = getShortDate(dateObj.date);
 
-                    return (
-                      <CalendarCell
-                        key={key}
-                        {...dateObj}
-                        {...getDateProps({
-                          dateObj: { ...dateObj, selectable },
-                          onClick: onPressBtn,
-                        })}
-                        data-testid={`datepicker-cell-${shortDate}`}
-                        inverted={inverted}
-                        selectable={selectable}
-                      >
-                        {dateObj.date.getDate()}
-                      </CalendarCell>
-                    );
-                  })
-                )}
-              </div>
+                  return (
+                    <CalendarCell
+                      key={key}
+                      {...dateObj}
+                      {...getDateProps({
+                        dateObj: { ...dateObj, selectable },
+                        onClick: onPressBtn,
+                      })}
+                      data-testid={`datepicker-cell-${shortDate}`}
+                      inverted={inverted}
+                      selectable={selectable}
+                    >
+                      {dateObj.date.getDate()}
+                    </CalendarCell>
+                  );
+                })
+              )}
             </div>
-          ))}
-        </div>
-        {showToday ? (
-          <TodayButton
-            inverted={inverted}
-            {...getToday(minDate, maxDate)}
-            {...getDateProps({
-              dateObj: getToday(minDate, maxDate),
-              onClick: onPressBtn,
-            })}
-          >
-            {todayButton}
-          </TodayButton>
-        ) : null}
-      </Segment>
-    </Ref>
+          </div>
+        ))}
+      </div>
+      {showToday ? (
+        <TodayButton
+          inverted={inverted}
+          {...getToday(minDate, maxDate)}
+          {...getDateProps({
+            dateObj: getToday(minDate, maxDate),
+            onClick: onPressBtn,
+          })}
+        >
+          {todayButton}
+        </TodayButton>
+      ) : null}
+    </SemanticUiReact.Segment>
+  );
+  return SemanticUiReact.Ref ? (
+    <SemanticUiReact.Ref innerRef={rootRef}>
+      {calendarInstance}
+    </SemanticUiReact.Ref>
+  ) : (
+    calendarInstance
   );
 };
 
diff --git a/stories/data.ts b/stories/data.ts
index 889835bc..bc9f2e7d 100644
--- a/stories/data.ts
+++ b/stories/data.ts
@@ -33,7 +33,7 @@ const locale = <const>[
 
 function arrayToMap<T extends string>(
   arr: readonly T[]
-): { [key in typeof arr[number]]: typeof arr[number] } {
+): { [key in (typeof arr)[number]]: (typeof arr)[number] } {
   return arr.reduce(
     (acc, cur) => ({ ...acc, [cur]: cur }),
     {} as { [key in T]: T }