react/ react hook с Rxjs

import { useEffect, useState } from "react";
 
 
import { Observable } from "rxjs/Observable";
 
import { interval } from "rxjs";
import { map, takeUntil } from "rxjs/operators";
 
export default function App() {
  const [sec, setSec] = useState(0);
  // const [int, setInt] = useState(null);
 
  const timerSecond$ = interval(1000);
 
  function start() {
    timerSecond$.subscribe((val) => setSec((state) => state + 1000));
  }
  function stop() {}
  //  interval(3000).pipe(
  //    takeUntil(
 
  //    )
 
  return (
    <div>
      <span> {new Date(sec).toISOString().slice(11, 19)}</span>
      <button className="start-button" onClick={() => start()}>
        Start
      </button>
      <button className="stop-button" onClick={stop()}>
        Stop
      </button>
    </div>
  );
}

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import { useEffect, useState } from "react";
import { interval, Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
 
type Status = "run" | "stop" | "wait";
 
export default function App() {
  const [sec, setSec] = useState(0);
  const [status, setStatus] = useState<Status>("stop");
 
  useEffect(() => {
    const unsubscribe$ = new Subject();
    interval(1000)
      .pipe(takeUntil(unsubscribe$))
      .subscribe(() => {
        if (status === "run") {
          setSec(val => val + 1000);
        }
      });
    return () => {
      unsubscribe$.next();
      unsubscribe$.complete();
    };
  }, [status]);
 
  const start = React.useCallback(() => {
    setStatus("run");
  }, []);
 
  const stop = React.useCallback(() => {
    setStatus("stop");
    setSec(0);
  }, []);
 
  const reset = React.useCallback(() => {
    setSec(0);
  }, []);
 
  const wait = React.useCallback(() => {
    setStatus("wait");
  }, []);
 
  return (
    <div>
      <span> {new Date(sec).toISOString().slice(11, 19)}</span>
      <button className="start-button" onClick={start}>
        Start
      </button>
      <button className="stop-button" onClick={stop}>
        Stop
      </button>
      <button onClick={reset}>Reset</button>
      <button onClick={wait}>Wait</button>
    </div>
  );
}
 
render(<App />, document.getElementById("root"));