Sort by date with isotope-layout

I can't find any documentation on how to do a date sort with isotope-layout in my Next.js project. Here is how far I have got. The date obviously sorts but it will sort alphabetically. I need to know how to write this in date: function ($elem) { return Date.parse($elem.find('.date').text()); }

const KeyOutcomes = (props) => {
  const isotope = useRef()
  const [sortKey, setSortKey] = useState('date')

  // initialize an Isotope object with configs
  useEffect(() => {
    isotope.current = new Isotope('.news', {
      itemSelector: '.newsInner',
      layoutMode: 'fitRows',
      getSortData: {
        header: '.header',
        date: '.date',
      },
    })
    // cleanup
    return () => isotope.current.destroy()
  }, [])

  // handling sort key change
  useEffect(() => {
    isotope.current.arrange({ sortBy: `${sortKey}` })
  }, [sortKey])

  const handleSortKeyChange = (key) => () => setSortKey(key)
  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <div className="sortAndFilter">
            <ul className="sortFilter">
              <li>Sort By:</li>
              <li
                onClick={handleSortKeyChange('header')}
              >
                Header
              </li>
              <li
                onClick={handleSortKeyChange('date')}
              >
                Date
              </li>
            </ul>
          </div>
          <div className="news">
            <div className="newsInner vege">
              <div className="newsText two">
                <h3 className="header">V News Header</h3>
                <p className="date">02/05/2020</p>
              </div>
            </div>
            <div className="newsInner one">
              <div className="newsText">
                <h3 className="header">D News Header</h3>
                <p className="date">26/05/2020</p>
              </div>
            </div>
            <div className="newsInner one">
              <div className="newsText">
                <h3 className="header">G News Header</h3>
                <p className="date">10/12/2021</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

You can pass a function as the date value in getSortData. This allows us to retrieve the date value and parse is accordingly for sorting.

isotope.current = new Isotope('.news', {
    itemSelector: '.newsInner',
    layoutMode: 'fitRows',
    getSortData: {
        header: '.header',
        date: function (newsInnerElem) {
            const dateElem = newsInnerElem.querySelector('.date')
            // Convert date to MM/DD/YYYY so it can be properly parsed
            const [day, month, year] = dateElem.textContent.split('/')
            return Date.parse(`${month}/${day}/${year}`)
        }
    }
})