typescript source code of Room

import faker from "faker";
import debounce from "lodash/debounce";
import React, { ChangeEvent, useState } from "react";
import Client from "./Client";
import { Button, Grid, H4, Input, RoomWrapper, Title } from "./Components";

interface User {
  id: string;
  name: string;
}

interface RoomProps {
  slug: string;
  removeRoom: () => void;
}

const createUser = (): User => ({
  id: faker.random.uuid(),
  name: `${faker.name.firstName()} ${faker.name.lastName()}`,
});

const Room: React.FC<RoomProps> = ({ slug, removeRoom }) => {
  const [users, setUsers] = useState<User[]>([createUser(), createUser()]);
  const [roomSlug, setRoomSlug] = useState<string>(slug);
  const [isRemounted, setRemountState] = useState(false);

  const remount = debounce(() => {
    setRemountState(true);
    setTimeout(setRemountState, 50, false);
  }, 300);

  const changeSlug = (e: ChangeEvent<HTMLInputElement>) => {
    setRoomSlug(e.target.value);
    remount();
  };

  const addUser = () => setUsers((users) => users.concat(createUser()));

  const removeUser = (userId: string) =>
    setUsers((users) => users.filter((u: User) => u.id !== userId));

  return (
    <RoomWrapper>
      <Title>
        <H4>Document slug:</H4>
        <Input type="text" value={roomSlug} onChange={changeSlug} />
        <Button type="button" onClick={addUser}>
          Add random user
        </Button>
        <Button type="button" onClick={removeRoom}>
          Remove Room
        </Button>
      </Title>
      <Grid>
        {users.map((user: User) =>
          isRemounted ? null : (
            <Client
              {...user}
              slug={roomSlug}
              key={user.id}
              removeUser={removeUser}
            />
          )
        )}
      </Grid>
    </RoomWrapper>
  );
};

export default Room;