Detect and fix defects in a React component

Find and fix logical and syntactical errors in the React code snippet below. Rename variables if necessary, but keep the entire code structure intact.

import React, { useState } from "react";
import "./index.css";
import Todo from "./Todo";

export const todos = [
  {
    name: "clear",
    id: "1",
    imagesrc: "https://avatars.githubusercontent.com/u/45297354?v=4",
  },
  {
    name: "buy",
    id: "2",
    imagesrc: "https://avatars.githubusercontent.com/u/6751787?v=4",
  },
  {
    name: "change",
    id: "3",
    name: "code",
    id: "4",
    name: "test",
    id: "5",
  },
];

export default function App() {
  const [query, setQuery] = React.useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />

      {todos
        .filter((todo) => todo.name.includes(query))
        .map((el) => (
          <Todo todo={el} />
        ))}
    </div>
  );
};