Updating State for unknown # of Props in Next.JS Class Components?

Let's say I want a sidebar for a live (duplex) chat client that displays all current users & updates whenever users join or exit.

User data from the API is passed in as a TS type MemberProps that is then be passed into a MembersProps.members[] array with a dynamic size.

type MemberProps = {
    id: string;
    username: string;
    image: string;
};

type MembersProps = {
    members: MemberProps[];
};

I need to update the front-end Components but want to do it in a Typescript-compliant way (no hooks, no React.FC..?).

Where should I update MembersProps.members[] & append/remove data from the front-end component?

Through state?

A constructor?

componentWillMount()?

In a function called by the class Component?

function UpdateMembers() {
  // fetch response, convert to new MemberProps
  // then push to array?
  // include logic to remove users that go offline?
}

class MembersOnline extends React.Component<MembersProps, MembersState> {

    // update MembersState && MembersProps?

    render() {
    return (
        <div>
            {this.props.image} {this.props.username}
        </div>
    );
}

Or should state behavior be defined in the Page e.g. pages/home in the project directory.

tl;dr confused about how Components in Typescript Next.js should deal with websocket-type behavior.