useEffect с async и Cookies.get в NextJS

Я пытаюсь получить эффект использования данных cookie, а затем использовать эти данные, мой компонент выглядит так ...

const Favourites = (props) => {
  const [isClick, setClick] = useState(false);

  const activityId = props.activityId

  useEffect(() => {
    const favourites = Cookies.get('favourites')
    if (favourites[activityId] === true) {
      setClick(true)
    }
  })

  return (
    <>
      <div className="heart">
        <Heart isClick={isClick} onClick={() => setClick(!isClick)} />
      </div>

    </>
  );
}

это то, что я получаю, когда использую console.log (Cookies.get ('избранное')) -

{"5edf47240dcb4713d3942e1b":true,"5edf47240dcb4713d3942e2b":true,"5fa10bd8f70458050ffe68af":true}

изменение

const favourites = Cookies.get('favourites')

to

const favourites = {"5edf47240dcb4713d3942e1b":true,"5edf47240dcb4713d3942e2b":true,"5fa10bd8f70458050ffe68af":true}

производит желаемый эффект.

избранное - это массив идентификаторов активности, хранящихся в localstorage с использованием js-cookie. это в основном список любимых действий пользователей, если им нравится действие и нажмите кнопку с сердечком, тогда идентификатор активности сохраняется в качестве ключа, а значение устанавливается на true

указанное выше не работает, для setClick не установлено значение true, если activityId в массиве избранного имеет значение true. Если я console.log (Cookies.get ('favourites')) и скопирую результат в избранное const, тогда он будет работать