Почему то выводиться undefined в консоли

 import React, { useRef, useState } from "react";
import ClassCounter from "./components/ClassCounter";
import Counter from "./components/Counter";
import PostItem from "./components/PostItems";
import PostList from "./components/PostList";
import MyButton from "./components/UI/button/MyButton";
import MyInput from "./components/UI/input/MyInput";
import "./styles/App.css";

function App() {
  const [posts, setPosts] = useState([
    { id: 1, title: 'JavaScript', body: 'Description' },
    { id: 2, title: 'JavaScript 2', body: 'Description' },
    { id: 3, title: 'JavaScript 3', body: 'Description' },
  ]);

  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const addNewPost = (e) => {
    e.preventDeault()
    const newPost = {
      title,
      body
    }
    console.log(newPost);
  };

  return (
    

      

                  value={title}
          onChange={e => setTitle(e.target.value)}
          type="text"
          placeholder="Название поста"
        />
        {/* Не управляемый/ неконтролируемый элемент */}
                   value={body}
           onChange={e => setBody(e.target.value)}
          type="text"
          placeholder="Описание поста" 
        />
        Создать пост
      
      
    

  );
}

export default App;