I want to display the date for each entry (date, text, question, answer) in a json database within a lit element in a js module.

Relevant code:

import { formatWithOptions } from "date-fns/fp";
import compose from "crocks/helpers/compose";

...

const newDate = (x) => new Date(x);


const formatDateWithOptions = formatWithOptions(
  {
    awareOfUnicodeTokens: true,
  },
  "d MMMM, yyyy, h:mm a"
);

const prettyDate = compose(formatDateWithOptions, newDate); // this is registering as an invalid date

When ${prettyDate(date)} is called inside a lit element, it throws

RangeError: Invalid time value.

The date format for (date) inside the json db is valid. Example: "2021-12-24T21:06:06.773Z"

According to the date-fns docs, formatWithOptions() should be fine to call with "d MMMM, yyyy, h:mm a". This post deals with the same error, but is using a different function (formatDistanceToNow). Where am I going wrong with my variables?