Camera following curve stops at end and user regains control

In my website I have a floating island and a camera that follows a curve. I would like this camera following the curve to only occur on load of the website. That way it’s a bit like a guided tour for the user, but once it reaches the end I would like it to stop where it is, and give control back to the user.

Right now in my code the camera follows the curve just fine, but it loops. Once the camera reaches the end it jumps back to the start and plays again. Below is my code:

var curve = new THREE.CubicBezierCurve3(
    new THREE.Vector3(200, 200, 800),
    new THREE.Vector3(100, 150, -200),
    new THREE.Vector3(-50, 10, -150),
    new THREE.Vector3(-50, 10, 0),
    new THREE.Vector3(-20, 0, 10)

  var points = curve.getPoints(50);
  var geometry6 = new THREE.BufferGeometry().setFromPoints(points);

  var material6 = new THREE.LineBasicMaterial({ color: 0xffffff });

  // Create the final object to add to the scene
  var curveObject = new THREE.Line(geometry6, material6);
  var clock = new THREE.Clock();

  var speed = 0.1;

  var pathTarget = new THREE.Vector3(0,10,0);

  var render = function () {
    curve.getPoint((clock.getElapsedTime() * speed) % 1.0, pathTarget)
    // cube.position.copy(pathTarget)
    requestAnimationFrame( render );
    // cube.rotation.x += 0.1;
    // cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    setTimeout(() => scene.remove(curveObject), 5000);

It would really help if you add a Fiddle.
I would try to .copy() the controls before start moving it and then you back to the initial version.
You should definitely check the methods available for OrbitControls here. Specially controls.saveState(), controls.reset() and controls.dispose().