Need help in lifecycle-methods and hooks. Trying to implement a countdown

I was doing this exercise where the message disappears after a set time. I want to add another feature where it displays a countdown of when the message disappears along with the message. I don’t know where I am going wrong. Please help. Also, explain your answer in detail.
Here’s a snippet of what I tried

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

export function Thought(props) {
  const { thought, removeThought } = props;
  let time = Math.ceil((thought.expiresAt - Date.now()) / 1000);
  const [showTime, setShowTime] = useState(time);

  useEffect(() => {
    const intervalId1 = setTimeout(() => {
      setShowTime((prev) => prev - 1);
    }, 1000);
    return () => {
      clearTimeout(intervalId1);
      time = Math.ceil((thought.expiresAt - Date.now()) / 1000);
    };
  });

  useEffect(() => {
    const timeRemaining = thought.expiresAt - Date.now();
    const intervalId = setTimeout(() => {
      // alert("Time has passed!");
      removeThought(thought.id);
    }, timeRemaining);
    return () => {
      clearTimeout(intervalId);
    };
  }, [thought]);

  const handleRemoveClick = () => {
    removeThought(thought.id);
  };

  return (
    <li className="Thought">
      <button
        aria-label="Remove thought"
        className="remove-button"
        onClick={handleRemoveClick}
      >
        &times;
      </button>
      <div className="text">
        {thought.text}
        {showTime}
      </div>
    </li>
  );
}

Link to exercise project