timer button in react

import React, { useEffect, useState } from "react";

export default function TimerButton({
  duration,
  action,
}: {
  duration: number;
  action: () => void;
}) {
  const [counter, setCounter] = useState(duration);

  useEffect(() => {
    if (counter > 0) {
        setTimeout(() => {
          setCounter(counter - 1);
        }, 1000);
    }
  }, [counter]);

  return (
    <button
      disabled={counter > 0}
      onClick={() => {
          action();
          setCounter(duration);
      }}
      className={`rounded-[12px] px-[16px] py-[8px] border ${
        counter > 0
          ? "border-black-100 text-black-400"
          : "border-primary text-primary"
      }`}
    >
      {counter > 0 ? <span>Try in {counter}sec</span> : <span>Resend</span>}
    </button>
  );
}