JavaScriptの検索のソートについて

現在アカウント名のソートの実装をしております。

chat
1  const userItem = [
2    {
3      name: "鈴木福",
4      text: "テンション上げてこー",
5    },
6    {
7      name: "あさみさん",
8      text: "マジ卍だね",
9    },
10    {
11      name: "近藤武蔵",
12      text: "武蔵です！よろぴこぴこ",
13    },
14    {
15      name: "かみ",
16      text: "我は神なり",
17    },
18    {
19      name: "God",
20      text: "我が本物の神なり",
21    },
22    {
23      name: "苦渋",
24      text: "我はく１０なり",
25    },
26  ];

room
1  const [mylist, setmylist] = useState([]);
2  useEffect(() => {
3    setmylist(props.userItem);
4  });
5  const filterList = (e: any) => {
6
7    const updateList = mylist.filter((item: any) => {
8      return (
9        item.name
10          .toLowerCase()
11          .search(e.target.value.toLowerCase()) !== -1
12      );
13    });
14    setmylist(updateList);
15  };
16     <input
17          onChange={filterList}
18          className={style.bl_RoomList_Input}
19          placeholder="&#xf002;アカウントを検索"
20        />
21      </div>
22 {mylist.map((index: any) => {
23        return (
24          <>
25            <Divider />
26            <ListItem
27              className={style.Liststyle}
28              onClick={() => selectChat(true)}
29            >
30              <ListItemAvatar>
31                <Avatar>
32                  {/* <img className="" src={props.profile_image} /> */}
33                </Avatar>
34              </ListItemAvatar>
35              {/* <ListItemText primary={props.user_name} secondary={props.text} /> */}
36              <ListItemText>
37                <div className={style.textwrap}>
38                  <span className={style.textbody}>{index.name}</span>
39                  <p className={style.text}>{index.text}</p>
40                </div>
41              </ListItemText>
42              <ListItemText />
43            </ListItem>
44            <Divider />{" "}
45          </>
46        );
47      })}