Help With my setInterval() Function please

Hello guys. Hope everyone is well and safe.
I am coding a Breakout Game and I am having such a hard time to find a way to make my PLAYFUNCTION() to work properly. Most features work fine but I cannot make the SETINTERVAL() function to start every time the user is prompted to restart the game while they still have lives remaining.
Any help will be greatly appreciated.
Thanks a lot

https://codepen.io/colchester/pen/qBqGYZZ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BREAKOUT TESTING</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>

    <nav class="main">

        <div class="headers header1">
            <p>SCORE: <span class="spano" id='score'>score</span> <span> | </span>
            <span>LIVES:</span><span class="spano" id="remain">lives</span></p>
        </div>

        <div class="headers header2">
            <p>PADDLE POSITION: <span class="spano" id="paddlePosition">paddle</span> <span> | </span>
            <span>CONST POSITION:</span><span class="spano" id="constPosition">const</span></p>
        </div>

        <div class="headers header3">
            <p>BALL POSITION: <span class="spano" id="ballPosition">ball</span> <span> | </span>
            <span>OTHER COUNT:</span><span class="spano" id="otherCount">other</span></p>
        </div>

        <div class="grid"></div>

        <div class="footers footer1">
            <button class="btn1" id='startButton' onclick="startFunction()">New Game</button>
            <button class="btn2" id='playButton' onclick="playFunction()">Play Game</button>
        </div>
    </nav>

    <script src="/js/index.js"></script>
</body>
</html>

body {
    background-color: white;    
  }
  .main {
    position: absolute;
    width: 800px;
    height: 654px;
    border: solid 2px black;
    background-color: #4b5153;
    padding: 2px;
    top: 4%;
    left: 25%;
    right: 25%;
  }
  .headers {
    font-size: 20px;
    font-weight: 800;
    color: white;
    text-align: center;
    align-items: center;
    background-color: rgb(33, 6, 131);
  }
.header1 {
    position: absolute;
    Top: 2px;
    width: 798px;
    height: 50px;
    border: solid 1px white;  
}
.header2 {
    position: absolute;
    top: 55px;
    width: 798px;
    height: 50px;
    border: solid 1px white;
}
.header3 {
    position: absolute;
    top: 109px;
    width: 798px;
    height: 50px;
    border: solid 1px white;
}
.spano {
    width: 100px;
    height: 25px;
    color: rgb(247, 177, 72);
    font-size: 23px;
    font-weight: 900;
}
.grid {
    position: absolute;
    top: 162px;
    width: 798px;
    height: 430px;
    border: solid 1px white;
    background-color: #111;
}
.footers {
    position: absolute;
    background-color: rgb(33, 6, 131);
  }
  
  .footer1 {
    position: absolute;
    Top: 596px;
    width: 798px;
    height: 58px;
    border: solid 1px white; 
    font-size: 20px;
    font-weight: 800;
    color: white;
    text-align: center;
    align-items: center;
  }
  .btn1 {
    position: absolute;
    border-radius: 2px;
    border: solid 2px white;
    font-size: 15px;
    font-weight: 800;
    width: 160px;
    height: 30px;
    top: 25%;
    left: 200px;
}
.btn2 {
    position: absolute;
    border-radius: 2px;
    border: solid 2px white;
    font-size: 15px;
    font-weight: 800;
    width: 160px;
    height: 30px;
     top: 25%;
     left: 440px; 
}

.paddle {
    position: absolute;
    width: 100px;
    height: 20px;
    background-color: white;
  }

  .ball {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: red;
  }
const grid          = document.querySelector('.grid')
const scoreDisplay  = document.querySelector("#score")
const livesDisplay  = document.querySelector("#remain")
const paddleDisplay = document.querySelector("#paddlePosition")
const constDisplay  = document.querySelector("#constPosition")
const ballDisplay   = document.querySelector("#ballPosition")
const otherDisplay  = document.querySelector("#otherCount")

let isClicked

const boardWidth   = 798
const boardHeight  = 430
const blockWidth   = 100
const blockHeight  = 20
const ballDiameter = 20

let xDirection = -2
let yDirection = 2

let score
let lives = 0 
let paddleStart     = [349, 10]
const constPosition   = [349, 180]
let paddleCurrentPosition
let ballFakePosition  = [389, 200]
let ballStartPosition = [389, 30]
let ballCurrentPosition
let otherCount

let timerId
let interval = 40


function startFunction() {
    if (lives === 0) {
        lives = 4
        score = 400
        paddleCurrentPosition = constPosition
        ballCurrentPosition   = ballFakePosition
        otherCount            = constPosition
        isClicked = false

        paddle.style.display = "block"
        ball.style.display = "block"
    //    drawPaddle()
        update()
    }
}

function playFunction() {

    isClicked = true

    if (lives > 0 && lives < 5 && isClicked === true) {

        //lives --
        score -= 100
        paddleCurrentPosition = [349, 10]  // constPosition // paddleStart

        document.addEventListener("keydown", movePaddle)

    //    paddle.style.display = "block"
    //    drawPaddle()

        ballCurrentPosition   = ballStartPosition
        otherCount            = constPosition
        update()

        timerId = setInterval(moveBall, interval)
    }
}

//isClicked = false

function update() {
    scoreDisplay.innerText  = score
    livesDisplay.innerText  = lives
    paddleDisplay.innerText = paddleCurrentPosition
    constDisplay.innerText  = constPosition
    ballDisplay.innerText   = ballCurrentPosition
    otherDisplay.innerText  = otherCount

    
    drawPaddle()
    drawBall()
}

//Add Paddle Function
const paddle = document.createElement("div")
paddle.classList.add("paddle")
grid.appendChild(paddle)

//Draw Paddle
function drawPaddle() {
    paddle.style.left   = paddleCurrentPosition[0] + "px"
    paddle.style.bottom = paddleCurrentPosition[1] + "px"
}
paddle.style.display = "none"

//Move Paddle
function movePaddle(e) {
    switch (e.key) {
      case "ArrowLeft":
        if (paddleCurrentPosition[0] > 10) {
            paddleCurrentPosition[0] -= 10
        //    update()
            drawPaddle()
        }
        break
      case "ArrowRight":
        if (paddleCurrentPosition[0] < boardWidth - (blockWidth + 10)) {
            paddleCurrentPosition[0] += 10
        //    update()
            drawPaddle()
        }
        break
    }
}

//Add Ball
const ball = document.createElement("div")
ball.classList.add("ball")
grid.appendChild(ball)

//draw Ball
function drawBall() {
    ball.style.left   = ballCurrentPosition[0] + "px"
    ball.style.bottom = ballCurrentPosition[1] + "px"
}
ball.style.display = "none"

//Move the Ball
function moveBall() {
    ballCurrentPosition[0] += xDirection
    ballCurrentPosition[1] += yDirection
    drawBall()
    checkForCollisions()
}

//Check for Collisions
function checkForCollisions() {
 
    ballDisplay.innerText = ballCurrentPosition
    
    // Check for Wall Hits
    if (
      ballCurrentPosition[0] >= boardWidth - ballDiameter ||
      ballCurrentPosition[0] <= 0 ||
      ballCurrentPosition[1] >= boardHeight - ballDiameter
    ) {
      changeDirection()
    }
  
    //Check for User Collision
    if (
        ballCurrentPosition[0] > paddleCurrentPosition[0] &&
        ballCurrentPosition[0] < paddleCurrentPosition[0] + blockWidth &&
        ballCurrentPosition[1] > paddleCurrentPosition[1] &&
        ballCurrentPosition[1] < paddleCurrentPosition[1] + blockHeight

    ) {
        changeDirection()
    }

    //Check for Game Over
    if (ballCurrentPosition[1] <= 0) {

        ballCurrentPosition = ballFakePosition

        isClicked = false

        clearInterval(timerId)
    
        lives --

        document.removeEventListener("keydown", movePaddle)

        update()
    
    }
}

function changeDirection() {
    if (xDirection === 2 && yDirection === 2) {
      yDirection = -2
      return
    }
  
    if (xDirection === 2 && yDirection === -2) {
      xDirection = -2
      return
    }
  
    if (xDirection === -2 && yDirection === -2) {
      yDirection = 2
      return
    }
  
    if (xDirection === -2 && yDirection === 2) {
      xDirection = 2
      return
    }
}