¿Cómo cambiar un texto del input con el nombre de la imagen seleccionada en React?

Tengo una pregunta, soy un poco novato con React aún y estoy con un formulario de registro. Dicho formulario tiene lo típico, pero también tengo para seleccionar una foto de perfil, la cosa es que cuando se selecciona la foto me gustaría que apareciera el nombre de la foto seleccionada, pero no es así.

El diseño del input es uno que ofrecen los de Bootstrap que me gustó, pero no ofrece la función que comento:

<div className="custom-file">
   <input
     type="file"
     name="fotoPerfilRegistro"
     className="custom-file-input"
     id="customFileLang"
     accept="image/jpg, image/jpeg, image/png"
     lang="es"
     onChange={actualizarFotoPerfil}
     value={fotoPerfil}
     ></input>
   <label className="custom-file-label" htmlFor="customFileLang">
     Seleccionar Archivo
   </label>
</div>

Me gustaría que se cambiara la parte que dice "Seleccionar Archivo" por el nombre del archivo seleccionado.

function actualizarFotoPerfil(e) {
    console.log(e.target.files[0]);
    this.selectedName = e.target.files[0].name;
}

<label className="custom-file-label" htmlFor="customFileLang">
 {selectedName?selectedName:'Seleccionar Archivo'}
</label>