The problem is that you're setting the key on a element that's not the root of the loop (the one that gets repeated).

So you'll need to put the key on <> like this:

{todos.map( todo => {
    return {
      < key={todo.todo_id}>
       .......

I would change it to a div, but it's my opinion:

{todos.map( todo => {
    return {
      <div key={todo.todo_id}>
       .......

Each element in your map should have a unique key... Simply stated your element <>....</> does not have a key prop.... Instead use a React Fragment like such <React.Fragment key={todo.todo_id}/>...</React.Fragment> That way each element (React.Fragment) has a unique key (make sure todo_id is a unique key). Of course you could use a div, but if you don't want a div rendered use React.Fragment.

TLDR:

You would need to add a key to the outermost jsx element in the callback function of your map. In your case this would the Fragment (<>). Here is the section in the documentation with some examples.

Explanation:

So why does React want me to add keys?

React prefers unique keys assigned to each element so that it can keep track of which particular elements need to be updated in the next render. These keys can help precisely narrow down which parts of the DOM need to be updated. This is one of the awesome parts about react, instead of rebuilding the whole DOM tree on each re-render, only the parts that changed will get rebuilt!

So what happens if I don't add keys?

React won't know the particular elements that need to be updated and will be forced to update more things than it needs to.