我遇到了一个问题时，使用一个排序功能。

var $wrapper = $('#list');

$wrapper.find('.blogboxes').sort(function (a, b) {
    return +b.dataset.date - +a.dataset.date;
})
.appendTo( $wrapper );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">

<div class="blogboxes" data-date="2023. 01. 28."></div>

<div class="blogboxes" data-date="2023. 01. 29."></div>

<div class="blogboxes" data-date="2023. 01. 30."></div>

<div class="blogboxes" data-date="2023. 01. 24."></div>
</div>

如果我在data-date中输入数字，它可以正常工作（desc），但输入date就不行了。我从Sanity查询中得到的日期格式如下："2023 - 01 - 28T12：10：00.000Z"甚至没有显示，所以我使用以下内容：{新日期（发布后发布于）. toLocaleDateString（）}
我可以将查询输出转换为可通过排序函数排序吗？
Jsfiddle http://jsfiddle.net/5e4y9xbj/中的示例
编辑：

import React, {useState, useEffect} from "react";
import "./pagestyles.css"
import sanityClient from "../client.js"
import { NavLink } from "react-router-dom";
import $ from "jquery"

const orderBy = () => {
  var $wrapper = $('#list');

  $wrapper.find('.blogboxes').sort(function (a, b) {
      return +b.dataset.date.replaceAll(/\. ?/g, '') - +a.dataset.date.replaceAll(/\. ?/g, '');
  })
  .appendTo( $wrapper );

};

export default function Blog() {
                  const [postData, setPost] = useState(null);
                  useEffect(()=> 
                  {sanityClient.fetch('*[_type =="post"]  {title, publishedAt, slug, extract, mainImage{asset->{_id, url},alt}}'

                                    ).then((data)=> setPost(data))
                                      .catch(console.error);
                  },[]);

window.addEventListener('scroll', orderBy);

  return (
    <main>
  <div className="kontener">   
  <h1>Blog</h1>  
    <div id="list" className="flex-container">
          { postData && postData.map((post, index)=>(
          <div className="blogboxes" key={index} data-date={new Date(post.publishedAt).toLocaleDateString()} >
            <div >
            <div className="contentzoom" >
            <img className="miniblog" src ={post.mainImage.asset.url} 
                 alt ={post.mainImage.alt}   />
              </div>
                  <NavLink className="posztlink" to={"/blog/" + post.slug.current} key ={post.slug.current}>
                    {post.title}
                  </NavLink>
                  <div className="extract">{post.extract}</div>
              </div>
          </div> ))}    
    </div>
  </div>
  </main>
)
}