How to design a chat?

Question

React

Hello. There is a task to make a chat.

Here is the design:

All unread chats should be in the top.
The problem is that the entire list is implemented as Infinite scroll because there can be a lot of chats and the backend gives them randomly
. On the backend, I asked to make a route to get all unread and read chats.
This is how it looks request body

And pass the structure to

Please tell me if I have a normal idea of ​​​​redesigning or is it possible to do it all in a simpler way?
This is what the component looks like when I design it:

import React, { Component } from "react";

/**Components */
import UserControls from "./UserControls";
import UnreadUsers from "./UnreadUsers";
import AllUser from "./AllUser";


export default class UserComponent extends Component {
  render() {
    return (
      <div className="scroll-container">
        <UserControls /> // компонент с input для поиска и фильтрации
        <div className="users-list">
          <UnreadUsers /> 
          <AllUser />
        </div>
      </div>
    );
  }
}