Значение в useEffect не обновляется

Значение variable берется из текстового файла и не обновляется в useEffect.

import React, { useState, useEffect } from 'react';
import ymaps from 'ymaps';

function MapComponent() {

  const [variable, setVariable] = useState('');

  useEffect(() => {
    const intervalId = setInterval(() => {
      fetch('variable.txt')
        .then(response => response.text())
        .then(data => setVariable(data));
    }, 1000);
  
    return () => {
      clearInterval(intervalId);
    };
  }, []);

  const [pt, setPt] = useState('');

  useEffect(() => {
    if (variable === 0) {
      setPt('islands#greenCircleDotIcon')
    } else if (variable !== 0) {
      setPt('islands#yellowCircleDotIcon')
    }
  }, [variable]);

  const [map, setMap] = useState(null);

  useEffect(() => {
    ymaps.load().then((ymaps) => {
      const map = new ymaps.Map('map', {
        center: [55.160682, 61.299485],
        zoom: 10,
      });

      setMap(map);

      const placemark = new ymaps.Placemark([55.160682, 61.299485], null, {
        preset: pt
      });

      map.geoObjects.add(placemark);
    });
  }, [pt]);

  return (
    <div>
      <div id="map" style={{ width: '100%', height: '100vh' }}></div>
    </div>
  );
}

export default MapComponent;