React.js Buton çalışmıyor

aybumer

Merhaba, aşağıdaki kodlarla oluşan listede sil butonuna bastığımda buton hiç tepki vermiyor, Sebebi ne olabilir. Yardımcı olacaklara şimdiden teşekkür ederim, Acemi olduğumu, kodlamayı da hobi olarak yaptığımı belirtmek isterim. (Kodların büyük kısmını internetten aldım)
//Moadal.js
import React from 'react';

const Modal = ({show, handleClose, handleConfirm, message}) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <div className="modal-main">
        <p>{message}</p>
        <button onClick={handleClose}>İptal</button>
        <button onClick={handleConfirm}>Sil</button>
      </div>
    </div>
  );
};

export default Modal;

//KisiRecord.js

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { RxUpdate} from "react-icons/rx";
import Modal from "./Modal";
import "bootstrap/dist/css/bootstrap.css";
import "./style.css";

const KisiRecord = (props) => {
  const [showModal, setShowModal] = useState(false);

  const handleDelete = async () => {
    console.log(props.record._id); // id'yi kontrol etmek için ekle
    await props.deleteRecord(props.record._id);
    setShowModal(false);
  };


  return (
    <tr>
      <td>{props.record.isim}</td>
      <td>{props.record.vergiNo}</td>
      <td>{props.record.tcNo}</td>
      <td>{props.record.durum}</td>
      <td>{props.record.tip}</td>
      <td>
        <Link className="btn btn-link" to={`/edit/${props.record._id}`}>
          <RxUpdate style={{ color: "blue", fontSize: "14px" }}/>
        </Link>
        {" "} | {" "}
        <button className="btn btn-link" onClick={() => setShowModal(true)}>
          <RiDeleteBin6Fill style={{ color: "red", fontSize: "20px"}}/>
        </button>
        <Modal
          show={showModal}
          handleClose={() => setShowModal(false)}
          handleConfirm={handleDelete}
          message={`"${props.record.isim}" isimli kaydı silmek istediğinize emin misiniz?`}
        />
      </td>
    </tr>
  );
};

export default KisiRecord;

//Kisiler.js
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import KisiRecord from "./KisiRecord";
import "bootstrap/dist/css/bootstrap.css";
import './style.css'

const Baslik = () => {
  return (
    <div>
      <h4 style={{ textAlign: "center", marginTop: "-45px" }}>Kişi Kayıtları Listesi</h4>
    </div>
  );
}

export default function Kisiler() {
  const [records, setRecords] = useState([]);

  useEffect(() => {
    async function getRecords() {
      try {
        const response = await fetch(`http://localhost:5000/record/`);
        if (!response.ok) {
          throw new Error(`Bir hata oluştu: ${response.statusText}`);
        }
        const records = await response.json();
        setRecords(records);
      } 
      catch (error) {
        window.alert(error.message);
      }
    }

    getRecords();
  }, []);

  async function deleteRecord(id) {
    try {
      await fetch(`http://localhost:5000/record/${id}`, {
        method: "DELETE"
      });
      const newRecords = records.filter((el) => el._id !== id);
      setRecords(newRecords);
    } 
    catch (error) {
      window.alert(error.message);
    }
  }

  const recordList = records.map((record) => (
    <KisiRecord key={record._id} record={record} deleteRecord={deleteRecord} />
  ));

  return (
    <div className="container">
      <Baslik />
      <Link className="btn btn-dark btn-sm" style={{ color: "ButtonFace", marginLeft: 0, marginTop:-60}} to="/create">Yeni Kayıt</Link> 

      <table className="table" style={{ marginTop: -20, color:"black"}}>
        <thead className="thead-dark">
          <tr>
            <th>İsim</th>
            <th>Vergi No</th>
            <th>TC No</th>
            <th>Durum</th>
            <th>Tip</th>
            <th>İşlemler</th>
          </tr>
        </thead>
        <tbody>{recordList}</tbody>
      </table>
    </div>
  ); 
 }