react Todo Base Component

import React, { useEffect, useState } from "react";
import "./CentralPane.css";
import FormAdder from "../FormAdder/FormAdder.jsx";
import ToDoPane from "../ToDoPane/ToDoPane";
import SearchBar from "../SearchBar/SearchBar";

export default function CentralPane() {
  const [items, setitems] = useState([
    { id: 0, title: "Buy Milk" },
    { id: 1, title: "Buy Toast" },
  ]);
  const [deletedItems, setdeletedItems] = useState([
    { id: 0, title: "Buy Coffee" },
  ]);
  const [searchValue, setsearchValue] = React.useState("");

  // useEffect(() => {
  //   if (items.length) {
  //     console.log(items);
  //   }
  //   console.log(deletedItems);
  // });
  const addItem = (newItem) => {
    const newItemObject = {
      id: items.length,
      title: newItem,
    };
    deleteFromDeletedItems(newItemObject);
    return setitems((prevState) => [...prevState, newItemObject]);
  };
  const deleteItem = (deleteItem) => {
    console.log("Yhaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", deleteItem);
    return setitems((prevState) =>
      prevState.filter((ele) => ele.title !== deleteItem.title)
    );
  };
  const addToDeletedItems = (newItem) => {
    const newItemObject = {
      id: deletedItems.length,
      title: newItem,
    };
    deleteItem(newItemObject);
    return setdeletedItems((prevState) => [...prevState, newItemObject]);
  };
  const deleteFromDeletedItems = (deleteItem) => {
    return setdeletedItems((prevState) =>
      prevState.filter((ele) => ele.title !== deleteItem.title)
    );
  };
  const editItem = (findItem, newTitle) => {
    for (let i = 0; i < items.length; i++) {
      if (items[i] === findItem) {
        items[i].title = newTitle;
      }
    }
    setitems([...items]);
  };
  const [content, setContent] = React.useState();
  const handleChange = (val) => {
    setsearchValue(val,()=>display());
  };

  function display(props) {
    if (props.searchValue !== -1) {
      return

    } else {
      return ;
    }
  }
  return (
    <div className="centralPane">
      <FormAdder addFunc={addItem} />
      <SearchBar searchValue={searchValue} handleChangeFunc={handleChange} />
      {/* <display searchValue={searchValue}/> */}

      <div>
      {items.map((item) => (
        <ToDoPane
          item={item}
          delFunc={deleteItem}
          done={addToDeletedItems}
          edit={editItem}
        />
      ))}
      <div className="doneWalaDiv">
        {deletedItems.map((item) => (
          <ToDoPane
            item={item}
            delFunc={deleteFromDeletedItems}
            done={addItem}
            edit={editItem}
            type="checked"
          />
        ))}
      </div>
    </div>


    {/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */}
    </div>
  );
}