I'm currently programming a to-do list with the PERN stack. I have the following problem: when I "map" all todos I get the following output: {"description":"wash the dishes"}. My getTodos function:

const getTodos = async() => {
    try {
      const response = await fetch("http://localhost:5000/todos");
      const jsonData = await response.json();

      setTodos(jsonData);
    } catch (err) {
      console.error(err.message);
    }
  };



 // states
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    getTodos();
  }, []);

A console.log(todos) outputs the following:

Array [ {…} ]
​
0: Object { todo_id: 9, description: "{\"description\":\"wash the dishes\"}" }
​
Length: 1
​
<prototype>: Array[]

map:

{todos.length != 0 &&
            todos.map((todo) => (
              <tr key={todo.todo_id}>
                <td>{todo.description}</td>
                <td>Edit</td>
                <td>Delete</td>
              </tr>
))}

returns {"description":"wash the dishes"}, but only "wash the dishes" should be output.

My backend getTodos function:

//get all todos

app.get("/todos", async (req, res) => {
  try {
    const allTodos = await pool.query("SELECT * FROM todo");
    res.json(allTodos.rows);
  } catch (err) {
    console.error(err.message);
  }
});