Pushing form values to an array. (React)

I'm having some trouble pushing the values from my form to an array that I'm mapping on screen.

const ForumTopic = [
  {
    title: "First Post",
    messages: "test",
    author: "Dagger",
    count: 1,
    date: "02/16",
  },
];

const [topic, setTopic] = useState(ForumTopic);

Storing ForumTopic in state so I can add entries and display on screen after I click the submit button below.

  const addTopic = (e) => {
    e.preventDefault();
    setTopic([...topic, e.target.value]);
  };

  <form onSubmit={addTopic}>
          Create a topic title
          <label htmlFor="title">
            <input id="title"></input>
          </label>
          Write your message
          <label htmlFor="message">
            <textarea id="message"></textarea>
          </label>
          <label htmlFor="author">
            <input id="author" defaultValue="Dagger" hidden></input>
          </label>
          <label htmlFor="count">
            <input id="count" defaultValue="1" hidden></input>
          </label>
          <label htmlFor="date">
            <input id="date" defaultValue="02/16/2023" hidden></input>
          </label>
          <button type="submit">
            Post New Message
          </button>
        </form>

That's my code and form. The code is meant to push the values from each label in the form to create a new object inside the topic array. I want everything stored in a new object with the id of each label to match the names of each object (title, author, date, etc) but for some reason all I'm getting are undefined errors.

A simple way to do it is like this.

You need to obtain the value you are getting with an onChange in the input.

LINK to the example: https://stackblitz.com/edit/react-8r9f8l?file=src%2FApp.js

import React, { useState } from 'react';
const ForumTopic = [
{
title: 'First Post',
messages: 'test',
author: 'Dagger',
count: 1,
date: '02/16',
},
];
export default function App() {
const [topic, setTopic] = useState(ForumTopic);
const [inputObj, setInputObj] = useState({
title: '',
messages: '',
author: 'Dagger',
count: 1,
date: '02/16',
});
const handleChange = (event) => {
setInputObj((curr) => ({
...curr,
[event.target.name]: event.target.value,
}));
};
const addTopic = (e) => {
e.preventDefault();
setTopic([...topic, inputObj]);
};
return (
<>
<form onSubmit={addTopic}>
<label htmlFor="title">
Create a topic title
<input
id="title"
name="title"
value={inputObj.title}
onChange={handleChange}
></input>
</label>
<label htmlFor="message">
Write your message
<textarea
id="message"
name="messages"
value={inputObj.messages}
onChange={handleChange}
></textarea>
</label>
<label htmlFor="author">
<input id="author" name="author" defaultValue="Dagger" hidden></input>
</label>
<label htmlFor="count">
<input id="count" name="count" defaultValue="1" hidden></input>
</label>
<label htmlFor="date">
<input id="date" name="date" defaultValue="02/16/2023" hidden></input>
</label>
<button type="submit">Post New Message</button>
</form>
{topic.map((item) => {
return (
<>
<p>{item.title}</p>
<p>{item.messages}</p>
<p>{item.author}</p>
<p>{item.count}</p>
<p>{item.date}</p>
<span>------------</span>
</>
);
})}
</>
);
}

The problem is that on your addTopic function:
e.target.value are always undefined

to access the data you have to do:

const addTopic = (e) => {
e.preventDefault()
const myData = {
title: e.target.title.value,
message: e.target.message.value
}
setTopic(prev => [...prev, myData])        
}