Слишком много проблем с повторным рендерингом в реагирующих хуках

Я хочу использовать UseState, чтобы разделить экран чата на Container и Presenter. Но у меня уже два дня слишком много проблем с рендерингом.

Это контейнер.jsx

import React, { useState } from "react";
import ChatsPresenter from "./ChatPresenter";

const ChatContainer = () => {
  const [title, setTitle] = useState({
    user: [""],
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  try {
  } catch (e) {
    setError({ e: "에러가 났어요😥" });
  } finally {
    setLoading({ loading: false });
  }

  return (
    <>
      <ChatsPresenter>{title.user}</ChatsPresenter>
    </>
  );
};

export default ChatContainer;

Это Presenter.jsx

import React from "react";
import styled from "styled-components";
import Loading from "../Loading";

const ChatsPresenter = ({ title, loading, error }) => {
  return (
    <>
      {loading ? (
        <Loading />
      ) : (
        <>
          <Container title = "Kim" />
        </>
      )}
    </>
  );
};

export default ChatsPresenter;
const Container = styled.div`
  font-size: 14px;
`;

Это index.jsx

import ChatContainer from "./ChatContainer";
export default ChatContainer;

Как мне решить эту проблему?