Ошибка arrow-body-style eslint?

Question

[D1ma5ta]

Не могу исправить ошибку, пробовал по разному, не получается.
Ошибка:
[eslint]
src/components/timer/timer.js
Line 11:19: Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>` arrow-body-style

import './timer.css';
import React, { memo, useEffect, useRef } from 'react';
import Countdown from 'react-countdown';

const renderer = ({ minutes, seconds, completed }) =>
  completed ? <span>Время истекло</span> : <span>{`${minutes}:${seconds < 10 ? '0' : ''}${seconds}`}</span>;

function Timer({ time, start, onStart, onStop, onDelete }) {
  const countDown = useRef(null);

  useEffect(() => {
    return () => {
      if (countDown.current) {
        countDown.current.stop();
      }
    };
  }, []);

  const countDownRef = (countdown) => {
    if (countdown) {
      countDown.current = countdown.getApi();
    }
  };

  const play = () => {
    countDown.current.start();
    onStart();
  };

  const stop = () => {
    countDown.current.pause();
    onStop();
  };

  const deleteTask = () => {
    if (countDown.current) {
      countDown.current.stop();
    }
    onDelete();
  };

  return (
    <div className="timer">
      <button aria-label="button" className="icon icon-play" type="submit" onClick={play} />
      <button aria-label="button" className="icon icon-pause" type="submit" onClick={stop} />
      <button aria-label="button" className="icon icon-delete" type="submit" onClick={deleteTask} />
      <Countdown ref={countDownRef} date={time} renderer={renderer} autoStart={start} />
    </div>
  );
}

export default memo(Timer);

Answer 1

[Алексей Уколов]

useEffect(() => () => {
    if (countDown.current) {
      countDown.current.stop();
   }
}, []);

Comments

[D1ma5ta]

Спасибо большое, помогло!