json serverにdeleteが出来ない

Reactでtodoアプリをつくっています。

json serverを立ててtodoを保管しているのです。

削除ボタンを押して指定されたtextを削除したいのですが、上手く行かずです。

目星としてはapp内のdeleteTOdoに、問題があるのかなと思います！
お手数ですがお分かりになる方ご教授ください。

下記が削除ボタンをした時出るエラーです。

DELETE http://localhost:3000/todos 404 (Not Found)
createError.js:17 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

```Reactはlocalhost:3001,json-serverは3000です。


```app
import React, { useState, useEffect } from "react";
import Form from "./Form";
import List from "./List";
import axios from "axios";

const App = () => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    console.log("effect発生！");
    axios
    .get("http://localhost:3000/todos")
    .then(res => {
      console.log("データ受け取り完了！");

      setTodos(res.data);
    });
  }, []);
  const addTodo = text => {
    const newTodo = {
      text: text
    };
    axios
    .post("http://localhost:3000/todos", newTodo)
    .then(res => {
        // Reactが3001で開いているのでjsonサーバーは3000
      console.log(res);
      setTodos(todos.concat(res.data));
    });
  };
    const deleteTodo = (todo) => {
      axios
      .delete("http://localhost:3000/todos")
      .then(res => {
        console.log(res);
        setTodos(todos.filter(e => e !== todo));
      });
    };
  console.log("描写されたtodoの数", todos.length);
  return (
    <div>
      <Form addTodo={addTodo} />
      <List todos={todos} deleteTodo={deleteTodo}/>
    </div>
  );
};

export default App;

List
1import React from "react";
2import Item from "./Item";
3import styled from "styled-components";
4const List = props => {
5  return (
6    <Wrapper>
7      {props.todos.map((todo, i) => (
8        <Item key={i} desc={todo.text} deleteTodo={props.deleteTodo}/>
9      ))}
10    </Wrapper>
11  );
12};
13const Wrapper = styled.ul`
14  list-style: none;
15`;
16export default List;
17

Item
1import React from "react";
2
3import styled from "styled-components";
4
5const Item = props => {
6  const [isDone, setIsDone] = React.useState(false);
7  const toggleIsDone = () => setIsDone(!isDone);
8  // ↑こうしないとがっつりエラーになる
9  // でないとsetIsDoneが永遠に作動し続ける。
10  const handleClick = () => props.deleteTodo(props.todo);
11
12  return (
13    <li>
14      <ContentText isDone={isDone}>{props.desc}</ContentText>
15      <DoneBtn isDone={isDone} onClick={toggleIsDone}>
16        {isDone ? "戻す" : "完了！"}
17      </DoneBtn>
18      <button onClick={handleClick}>削除</button>
19    </li>
20  );
21};
22const ContentText = styled.p`
23  text-decoration: ${props => (props.isDone ? "line-through" : "none")};
24`;
25const DoneBtn = styled.button`
26  color: ${props => (props.isDone ? "gray" : "black")};
27`;
28
29export default Item;
30