Input control is not editable on Multi Modal of react-bootstrap - reactjs

Question

I have two Modal Components in my application and on click of edit button in a Modal another Modal will open, and in the second Modal I have input control and its not editable
The following are the files which I used in my application.
import bootstrap css in index.js file as below
import 'bootstrap/dist/css/bootstrap.css'
App.js
function App() {
return (
<div>
<MyButton />
</div>
);
}
MyButton.js
export default class MyButton extends Component {
constructor(props) {
super(props);
this.state = {
personalInfoModalShow: false
};
}
render() {
let handlePersonalInfoModalHide = () => this.setState({
personalInfoModalShow: false
});
return (
<div>
<button className="btn btn-primary" onClick={() => this.setState({
personalInfoModalShow: true
})}
>
Open Modal
</button>
<PersonalInfoModal
show={this.state.personalInfoModalShow}
handlePersonalInfoModalHide={handlePersonalInfoModalHide}
/>
</div>
);
}
}
PersonalInfoModal.js
import React, {Component} from 'react';
import Modal from "react-bootstrap/Modal";
import {Container, Table} from "reactstrap";
import {FaPencilAlt} from "react-icons/fa";
import EditModal from "./EditModal";
export default class PersonalInfoModal extends Component {
constructor(props) {
super(props);
this.state = {
id: 100,
name: 'Sam',
department: 'IT',
isEditClicked: false,
editModalShow: false
};
}
render() {
let handleEditModalHide = () => this.setState({
isEditClicked: false,
editModalShow: false
});
return (
<div>
<Modal
show={this.props.show}
onHide={this.props.handlePersonalInfoModalHide}
size="lg"
centered
>
<Modal.Header closeButton>
<Modal.Title id="personal-modal-title">
Personal Information
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Container fluid>
<Table striped responsive size="sm" className="text-center mt-4">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Department</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>{this.state.id}</td>
<td>{this.state.name}</td>
<td>{this.state.department}</td>
<td>
<div onClick={() => this.setState({
isEditClicked: true,
editModalShow: true
})}
>
<FaPencilAlt />
</div>
{this.state.isEditClicked &&
<EditModal
show={this.state.editModalShow}
handleEditModalHide={handleEditModalHide}
department={this.state.department}
/>
}
</td>
</tr>
</tbody>
</Table>
</Container>
</Modal.Body>
</Modal>
</div>
);
}
}
EditModal.js
import React, {Component} from 'react';
import {Button, Modal} from "react-bootstrap";
export default class EditModal extends Component {
constructor(props) {
super(props);
this.state = {
department: props.department
};
}
handleChange = (e) => {
const input = e.target;
const name = input.name;
const value = input.value;
this.setState({[name]: value});
};
render() {
return (
<div>
<Modal
show={this.props.show}
onHide={this.props.handleEditModalHide}
size="sm"
centered
>
<Modal.Header closeButton>
<Modal.Title id="edit-modal-title">
Edit
</Modal.Title>
</Modal.Header>
<Modal.Body>
<input style={{width: "35%"}} type="text" value={this.state.department} name="department" onChange={this.handleChange} />
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.props.handleEditModalHide}>
Close
</Button>
<Button variant="primary" onClick={() => alert("saved")}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}