Estoy tratando de obtener información de un archivo de entrada y almacenarla en una variable, pero me está dando un error al seguir,

Error: los objetos no son válidos como hijos de React (encontrado: objeto con claves {input}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.

el video tutorial que estoy siguiendo escribió el mismo código. He escrito el mismo código pero no puedo entender por qué mi código no se ejecuta, soy muy nuevo en reaccionar, así que no sé qué hacer.

 function Feed() { const [input, setInput] = useState(''); const [posts, setPosts] = useState([]); useEffect(() => { db.collection('posts').onSnapshot((snapshot) => setPosts( snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data(), })) ) ); }, []); const sendPost = (e) => { e.preventDefault(); db.collection('posts').add({ name: 'Sumit Sarkar', description: 'This is a test', message: input, photoUrl: '', timestamp: firebase.firestore.FieldValue.serverTimestamp(), }); }; return ( <div className='feed'> <div className='feed__inputContainer'> <div className='feed__input'> <CreateIcon /> <form action=''> <input value={input} onChange={(e) => setInput(e.target.value)} type='text' /> <button onClick={sendPost} type='submit'> Send </button> </form> </div> <div className='feed__inputOptions'> <InputOption Icon={ImageIcon} title='Photo' color='#70B5F9' /> <InputOption Icon={SubscriptionsIcon} title='Video' color='#E7A33E' /> <InputOption Icon={EventNoteIcon} title='Event' color='#C0CBCD' /> <InputOption Icon={CalendarViewDayIcon} title='Write Article' color='#7FC15E' /> </div> </div> {posts.map(({ id, data: { name, description, message, photoUrl } }) => ( <Post key={id} name={name} description={description} message={message} photoUrl={photoUrl} /> ))} <Post name='Sumit Sarkar' message='WOW! this works' description='This is a test' /> </div> ); } export default Feed;