React To do app not updating after delete [duplicate]

Thanks for the help in advance. I have a to-do app the items get deleted on clicking the delete. But on submitting the new item along with the new item the deleted item is also listed. Provided the code with this. Please help to sort this issue. On the console, the data is listed correctly but not updating the state

App.js

import { useState } from "react";
import Input from "./Inputs/Input";
import Items from "./Items/Items";

import "./styles/App.scss";

export default function App() {
  const [formData, setInitFormData] = useState([]);
  const inputHandler = (data) => {
    setInitFormData(data);
  };
  const dataAftrDelInPar = (delData) => {
    console.log("After Deleted:", delData);
    setInitFormData(delData);
    console.log("Form Data:", formData);
  };

  return (
    <div className="container w-[70%] mt-5">
      <h1>To Do App</h1>
      <Input FrmData={inputHandler} />
      <Items listData={formData} deletedDataToPr={dataAftrDelInPar} />
    </div>
  );
}

Item.js

import { useState, useEffect, useRef } from "react";
import { CheckIcon, PencilIcon } from '@heroicons/react/24/solid';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrashAlt  } from '@fortawesome/free-solid-svg-icons';

export default function Items({ listData,deletedDataToPr }) {
  const [frmValue, setFrmVal] = useState(listData);
  const [selected, setSelected] = useState(null);
  const [updateInp, setUpdateInp] = useState(null);
  const [editVal, setEditVal] = useState(null);
  const updatedFrmRef = useRef(null);

  useEffect(() => {
    setFrmVal(listData);
  }, [listData]);

  const deleteHandler = (val) => {
    const BefrdeleteData = [...frmValue];
    const AftrdeleteData = BefrdeleteData.filter((currFl, ind) => ind !== val);
    setFrmVal(AftrdeleteData);
    deletedDataToPr(AftrdeleteData)
    setSelected(null);
  }

  const doneHandler = (doneVal) => {
    setSelected(doneVal);
  }

  const updateHandler = (updateVal) => {
    console.log(`currently clicked is ${updateVal}`);
    setUpdateInp(updateVal);
    setEditVal(frmValue[updateVal]);
  }

  const editFrmSave = (saveFrmVal) => {
    const updatedData = [...frmValue];
    updatedData[saveFrmVal] = updatedFrmRef.current.value;
    setFrmVal(updatedData);
    setUpdateInp(null);
  }

  return (
    <>
      {frmValue.map((currEl, index) => (
        <div className="justify-between flex items-center rounded-md bg-blue-50 my-3 px-2 py-2 ring-1 ring-inset ring-blue-700/10" key={index}>
          {updateInp === index ?
            (
              <div className="grid grid-cols-12 gap-4 items-center">
                <div className="col-span-9">
                  <input type="text" className="border border-gray-300 p-1" defaultValue={editVal} ref={updatedFrmRef} />
                </div>
                <div className="col-span-3 px-2">
                  <button type="submit" className="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" onClick={() => { editFrmSave(index) }}>
                    Submit
                  </button>
                </div>
              </div>
            )
            :
            (<>
              <h2 className={`text-lg font-medium text-blue-700 ${selected === index ? 'line-through text-red-500' : ''}`}>{currEl}</h2>
              <div className="justify-between flex items-center">
                <button className="p-1.5 flex items-center space-x-2 text-red-500 rounded" onClick={() => { deleteHandler(index) }}>
                  <FontAwesomeIcon icon={faTrashAlt} />
                </button>
                <button onClick={() => { doneHandler(index) }} className="p-1.5">
                  <CheckIcon className="w-6 h-6 text-green-500" />
                </button>
                <button onClick={() => { updateHandler(index) }} className="p-1.5">
                  <PencilIcon className="h-4 w-4 text-blue-500" />
                </button>
              </div>
            </>)
          }

        </div>
      ))}
    </>
  );
}