[Fetch and Write data- React] Fetch datas and write to components in React

fetch.tsx

import { useEffect, useState } from "react";

interface ResponseData {
  userId: number;
  id: number;
  title: string;
  body: string;
}

function App() {
    const [content, setContent] = useState<null | ResponseData>(null);
    const [error, setError] = useState<null | string>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts/1")
        .then(res => {
            if (res.ok) {
              	setError(null);
              	setLoading(false);
                return res.json();
            }
            throw new Error("Response is not ok!");
        })
        .then(data => {
            setContent(data);
            setLoading(false);
            setError(null);
        })
        .catch(err => {
            setError(err)
            setLoading(false);
        })
    }, []);

    if (loading) {
        return <div>loading...</div>;
    }

    if (error) {
        return <div>{error}</div>
    }
  
    return <div>{content && content?.title}</div>;
}

export default App;