I can not change the value of MDBInput after opening the MDBLightbox. And I can not open the Developer Tools at the same time. It confused me a lot. I use the code below:

<MDBInput
    label="Example label"
    id="form1"
    type="text"
    onKeyDown={(e) => {
      console.log(e);
    }}
    onChange={(e) => {
      console.log(e);
    }}
  />
  <MDBLightbox>
    <MDBRow>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          fullscreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          className="w-100"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
          fullscreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
          className="w-100"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
          fullscreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
          className="w-100"
        />
      </MDBCol>
    </MDBRow>
  </MDBLightbox>

Below the red line is the value I tried to change in the input box, and the onchange event does not print out the value.