input form modal doesnt change

Question

this is the scenario, i create an update button to update the selected data based on the update button, when i press the update button then the modal ajan form opens and the selected data can be displayed on the form. but when I try to update the data on the form, I can't change or type in the new data. this is my code

Topik.js

/* eslint-disable prettier/prettier */
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import BootstraTable from 'react-bootstrap-table-next'
import { Modal } from 'react-bootstrap'
import AddTopik from './AddTopik'
import EditTopik from './EditTopik'

function Topik() {
  const [topik, setTopik] = useState([])
  const [modul, setModul] = useState([])
  const [showModal, setShowModal] = useState(false)
  const [showEditModal, setShowEditModal] = useState(false)
  const [edit, setEdit] = useState({})

  useEffect(() => {
    getTopik()
  }, [])

  useEffect(() => {
    getModul()
  }, [])

  const columns = [
    {
      dataField: '_id',
      text: 'No',
      sort: true,
    },
    {
      dataField: 'topik_nama',
      text: 'Nama',
    },
    {
      dataField: 'topik_detail',
      text: 'Deskripsi',
    },
    {
      dataField: 'topik_aktif',
      text: 'Status',
    },
    {
      dataField: 'action',
      text: 'Action',
    },
  ]

  const getTopik = async () => {
    const res = await axios.get('http://localhost:5000/akmtopik')
    setTopik(res.data)
  }

  const getModul = async () => {
    const res = await axios.get('http://localhost:5000/akmmodul')
    setModul(res.data)
  }

  const handleEdit = (id) => {
    const data = topik.find((item) => item._id === id)
    setEdit(data)
    setShowEditModal(true)
    // console.log(data)
  }

  const handleDelete = async (id) => {
    try {
      await axios.delete(`http://localhost:5000/akmtopik/${id}`)
      getTopik()
    } catch (error) {
      console.log(error)
    }
  }

  const handleShowModal = () => {
    setShowModal(true)
  }

  const handleCloseModal = () => {
    setShowModal(false)
  }

  // const handleShowEditModal = (id) => {
  //   setShowEditModal(true)
  // }

  const handleCloseEditModal = () => {
    setShowEditModal(false)
  }
  return (
    <>
      <section className="topik">
        <h3 className="ms-3">Topik</h3>
        <p className="ms-3">
          Daftar topik, penambahan topik, pengubahan topik, dan penghapusan topik berdasarkan Modul
        </p>
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <div className="card">
                <div className="card-header">Pilih Modul</div>
                <div className="card-body">
                  <div className="row">
                    <strong>Pilih Modul</strong>
                    <div className="col-md-12 mt-2 mb-2">
                      <select
                        className="form-select form-select-sm"
                        aria-label="Default select example"
                      >
                        {modul.map((item) => (
                          <option key={item._id} value={item._id}>
                            {item.modul_nama}
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>
                </div>
                <div className="card-footer">
                  <small>Pilih modul terlebih dahulu untuk menampilkan dan menambah topik</small>
                </div>
              </div>
            </div>
            <div className="col-md-9">
              <div className="card">
                <div className="card-header">Daftar Topik</div>
                <div className="card-body">
                  <button className="btn btn-primary mb-3" onClick={handleShowModal}>
                    Tambah Topik
                  </button>
                  <div className="row">
                    <BootstraTable
                      keyField="_id"
                      columns={columns}
                      data={
                        topik &&
                        topik.map((item, index) => ({
                          _id: index + 1,
                          topik_nama: item.topik_nama,
                          topik_detail: item.topik_detail,
                          topik_aktif: item.topik_aktif === true ? 'Aktif' : 'Tidak Aktif',
                          action: (
                            <>
                              <button
                                className="btn btn-sm btn-warning me-2"
                                onClick={() => handleEdit(item._id)}
                              >
                                Edit
                              </button>
                              <button
                                className="btn btn-sm btn-danger"
                                onClick={() => handleDelete(item._id)}
                              >
                                Hapus
                              </button>
                            </>
                          ),
                        }))
                      }
                    />
                  </div>
                </div>
                <div className="card-footer">
                  <small>Pilih modul terlebih dahulu untuk menampilkan dan menambah topik</small>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* modal edit */}
        <Modal show={showModal}>
          <Modal.Header>
            <Modal.Title>Tambah Topik</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <AddTopik />
          </Modal.Body>
          <Modal.Footer>
            <button className="btn btn-danger" onClick={handleCloseModal}>
              Close
            </button>
          </Modal.Footer>
        </Modal>

        {/* modal edit */}
        <Modal show={showEditModal}>
          <Modal.Header>
            <Modal.Title>Tambah Topik</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <EditTopik edit={edit} />
          </Modal.Body>
          <Modal.Footer>
            <button className="btn btn-danger" onClick={handleCloseEditModal}>
              Close
            </button>
          </Modal.Footer>
        </Modal>
      </section>
    </>
  )
}

export default Topik

EditTopik.js

/* eslint-disable prettier/prettier */
/* eslint-disable react/prop-types */

import React, { useEffect, useState } from 'react'
import axios from 'axios'

const EditTopik = ({ edit }) => {
  const [topikNama, setTopikNama] = useState('')
  const [topikDetail, setTopikDetail] = useState('')
  const [topikAktif, setTopikAktif] = useState('')

  const id = edit._id

  useEffect(() => {
    getTopikById()
  })

  const getTopikById = async () => {
    const res = await axios.get(`http://localhost:5000/akmtopik/${id}`)
    const { topik_nama, topik_detail, topik_aktif } = res.data
    setTopikNama(topik_nama)
    setTopikDetail(topik_detail)
    setTopikAktif(topik_aktif)
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    const data = {
      topik_nama: topikNama,
      topik_detail: topikDetail,
      topik_aktif: topikAktif,
    }
    await axios.patch(`http://localhost:5000/akmtopik/${id}`, data)
    window.location.reload()
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <div className="mb-3">
          <label className="form-label">Nama Topik</label>
          <input
            type="text"
            className="form-control"
            value={topikNama}
            onChange={(e) => setTopikNama(e.target.value)}
            required
          />
        </div>
        <div className="mb-3">
          <label className="form-label">Deskripsi</label>
          <textarea
            type="text"
            className="form-control"
            value={topikDetail}
            onChange={(e) => setTopikDetail(e.target.value)}
            required
          />
        </div>
        <div className="mb-3">
          <label className="form-label">Status</label>
          <input
            className="form-control"
            type="text"
            value={topikAktif === true ? 'Aktif' : 'Tidak Aktif'}
            readOnly
          />
        </div>
        <div className="d-grid gap-2">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </>
  )
}

export default EditTopik

please help me