Сильно лагает отрисовка canvas

Делаю flappybird через react, с использованием canvas. Столкнулся с такой проблемой, что когда отрисовываю изображения труб, через которые должна лететь птичка, то со временем (примерно секунд через 30) все начинает лагать, мелькать и т.д.

const selector = useSelector(state => ({
        initBird: state.bird.initBird,
        initBoard: state.bird.initBoard,
        pipes: state.bird.pipes,

    }),shallowEqual);
    

    useEffect(() => {
        let canvas = document.querySelector('#game-board-flappy');
        dispatch(actions.initBoard(canvas.width,canvas.height));
        dispatch(actions.initBird(canvas.width/8,canvas.height/2));
        dispatch(actions.addPipe());
        let intervalId = setInterval(() => {
            dispatch(actions.addPipe()); //данная функция добавляет новые трубы (вернюю и нижнюю)
        }, 1500);

        return () => clearInterval(intervalId);
        
    },[])


    useEffect(() => {
        let canvas = document.querySelector('#game-board-flappy');
        let context = canvas.getContext('2d');

        function drawMovingObjects() {
            requestAnimationFrame(drawMovingObjects);
            drawBack(canvas,context);
            drawBird(canvas,context,selector.initBird);
            for (let elem of selector.pipes){
                elem.x -= 2;   
                drawPipe(canvas,context, elem.img, elem.x, elem.y, 64, 512);
            }
        }
        
        drawMovingObjects();
        requestAnimationFrame(drawMovingObjects);
        
    },[selector.initBoard,selector.pipes])