Side note: In general it's considered bad practice to store components in another components state.

But that's not really the problem here. Given your code, it's a simple closure problem.

This:

const removeTimer = () => {
  console.log("timerList", timerList);
};

definition closes over the current timerList. So it will log it, as it was when removeTimer was assigned. Currently that's on every render. So it will log the state seemingly one step behind. There's no fix around that, because that's just how closures work.

Provided you actually want to remove a timer, when removeTimer is invoked, you would need to use the callback version of the updater (setTimerList) and pass some identifying value so that you can actually remove the correct one.

This would all be a lot simpler, if you followed the initial advice and don't store the component in the state, but rather it's defining properties.

The following would be a working example (please excuse my typescript):

import React, { useState } from 'react';

type FullTimerProps = {
  id: string;
  expiryTimestamp: Date;
  removeTimer: () => void;
}

const FullTimer = ({expiryTimestamp, removeTimer, id}: FullTimerProps): JSX.Element => {
  return (
    <div>
      <button onClick={removeTimer}>remove</button>
      {id}: {expiryTimestamp.toLocaleDateString()}
    </div>
  );
};

type Timer = {
  id: string;
  expiryTimestamp: Date;
};

const TimerList = (): JSX.Element => {
  const [timerList, setTimerList] = useState<Timer[]>([]);

  const removeTimer = (timer: Timer) => {
    setTimerList(timerList => timerList.filter(t => t.id !== timer.id));
  };

  return (
    <div id="main">
      {timerList.map(timer => (
        <FullTimer
          key={timer.id}
          id={timer.id}
          expiryTimestamp={timer.expiryTimestamp}
          removeTimer={() => removeTimer(timer)}
        />
      ))}

      <div className="add-button before">
        <button
          onClick={() =>
            setTimerList(timerList => [...timerList, {
              id: window.prompt('Insert timer name') + ` ${timerList.length}`,
              expiryTimestamp: new Date()
            }])}
        >Add
        </button>
      </div>
    </div>
  );
};

changing this code snippet

            setTimerList((timerList) => [
              ...timerList,
              <FullTimer
                expiryTimestamp={time}
                removeTimer={() => removeTimer()}
                id={window.prompt("Insert timer name") + ` ${timerList.length}`}
                key={timerList.length}
              />,
            ]);

to

            timerList.push(<FullTimer
              expiryTimestamp={time}
              removeTimer={() => removeTimer()}
              id={window.prompt("Insert timer name") + ` ${timerList.length}`}
              key={timerList.length}
            />);
            setTimerList([...timerList]);

Fixed the problem you are having. Although this change is not recommended because it is not immutable approach, but it fixes this case.

UPDATE: It turned out that you duplicated the removeTimer function during the setTimerList call which cause the child component to capture the timerList at the moment of assignment. Which is mentioned at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures?retiredLocale=vi#closure as mr @yoshi has shown

Try to write your onclick function like this

<button
  onClick={() => removeTimer()}
>

Also over here

 <FullTimer
    expiryTimestamp={time}
    removeTimer={() => removeTimer()}