index.js

import "app/index.css"
import "app/App.css"
import "./styles.css"
import React, { useState, useEffect } from "react"
import ReactDOM from "react-dom"

function App() {
  const [appTime] = useState(Date.now())

  return (
    <div>
      <h1>App</h1>
      <TruckPopup time={appTime} />
    </div>
  )
}

function shouldWarn(now, time) {
  return now - time > 2000
}

function TruckPopup({ time }) {
  const [now, setNow] = useState(Date.now())
  const [warning, setWarning] = useState()

  if (!warning && shouldWarn(now, time)) {
    setWarning(true)
  }

  useEffect(() => {
    if (!warning) {
      if (shouldWarn(now, time)) {
        setWarning(true)
      } else {
        setTimeout(() => setNow(Date.now()), 100)
      }
    }
  }, [now, time, warning])

  return (
    <div>
      <h2>Truck Popup</h2>
      {warning && <p style={{ color: "red" }}>WARNING</p>}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))