Bug: useRef(null) TypeError

[josh-0000]

This issue started occurring after the 7.0.0 upgrade for react-datepicker.
This issue only occurs when web packing a component that uses react-datepicker and then using that component in another application.
Downloading react-datepicker locally and using a local version of the component works fine.
Application builds fine the error only occurs when navigating to the page where the component is located.
Our main application uses next, a page's paradigm, and runs client side.

What has been attempted that didn’t work?

• Made changes to both package.json’s to ensure there is only one version of react and react-dom and those versions satisfy react-datepicker’s dependencies.
• Made changes to the DateTimePicker component to ensure we are following the rules of hooks and the application builds.
• Tried using a bare bones version of DateTimePicker to ensure we weren’t using it’s props incorrectly.
• Tried using react-datepicker as a peer dependency.
• Tried aliasing react and react-dom to ensure it’s being webpacked correctly.
• Tried using DateTimePicker in a barebones next app on the first page to ensure it wasn’t just incompatible with mmp-ui.
• Tried updating “externals” syntax in the webpack to ensure correct consumption of peer dependencies.
• Tried “lazy loading” DateTimePicker (maybe done wrong worth looking into again)
• Tried creating a basic component without dependencies in common-ui to see if it’s only an issue with react-datepicker (this worked)
• Tried downgrading react-datepicker to the version it was before the dependency upgrades
• Tried going to a version before the dependency upgrades occurred and upgraded only react-datepicker

What works?
• Copy over the DatePicker folder from common-ui to your application, reference the local version of DateTimePicker, and install react-datepicker to your application.

What does our component look like?

import DatePicker, { DatePickerProps } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import * as styles from "./DateTimePicker.module.scss";
import React from "react";

type DateTimePickerProps = Pick<DatePickerProps,
  "calendarIconClassName" | "className" | "onBlur" | "onChangeRaw" |
  "placeholderText" | "selected" | "showIcon" | "timeIntervals"> & {
    onChange?: (date: Date | null) => void;
  };

export const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
  return (
    <DatePicker
      selected={props.selected}
      className={`${styles.datePicker} ${props.className}`}
      onChange={(date: Date | null) => props.onChange?.(date)}
      onChangeRaw={(event) => props.onChangeRaw?.(event)}
      onBlur={(event) => props.onBlur?.(event)}
      showTimeSelect
      timeIntervals={props.timeIntervals ?? 30}
      timeFormat="HH:mm'Z'"
      dateFormat="dd MMM yyyy HH:mm'Z'"
      timeCaption="Time"
      popperPlacement="bottom-start"
      showIcon={props.showIcon}
      calendarIconClassName={props.calendarIconClassName}
      placeholderText={props.placeholderText}
    />
  );
};