Javascript – How do I render data immediately after it was created

I am created a comment section where i would like to be able to create a comment and immediately after display it in the comment section but i am not sure how to rerender the jsx after state changes. putting the state in the useEffect dependency creates an infinite loop. Help would be appreciated.

const Post = (props) => {

    const [post, setPost] = useState([]);
    const [comments, setComments] = useState([]);
    const {id} = useParams();
    
    useEffect(() => {
        fetchData();
        fetchComments();
    }, [])

    const fetchData = () => {
        axios.get(`http://localhost:1234/api/posts/${id}`).then((res) => {
            setPost(res.data);
        }).catch((err) => {
            console.log(err);
        })
    }

    const fetchComments = () => {
        axios.get(`http://localhost:1234/api/posts/${id}/comments`).then((res) => {
            console.log(res)
            setComments(res.data);
        }).catch((err) => {
            console.log(err);
        })
    }


    console.log(comments)

    return (
        <div>
            <div>thumbnail image</div>
            <h1>{post.title}</h1>
            <div>this is where body of post will go</div>
            <CommentForm postId={post._id}/>
            {comments.map((comment) => (
                <Comment comment={comment.comment} username={comment.author.username} time={comment.timeStamp}/>
            ))}
        </div>
    )
}