Игра-арканоид в канвасе на React. Почему скорость мяча меняется в зависимости от состояния платформы?

export interface Brick {
    color: string,
    width: number,
    height: number,
    x: number,
    y: number,
}
 
export interface Ball {
    x: number,
    y: number,
    width: number,
    height: number,
    dirX: SPEED,
    dirY: SPEED,
    speed: SPEED
}
 
export interface Platform {
    x: number,
    y: number,
    width: number,
    height: number,
    dir: SPEED
}
 
const createRowOfBricks = (color: string) => {
    let row = Array<string>(BRICK_ROW_LEN)
    row.fill(color)
    return row
}
 
const createBricks = () => {
    let level1 = Array<Array<string>>()
    for (let c of Object.keys(Colors).filter(v => Number.isNaN(parseInt(v))) ){
        level1.push(createRowOfBricks(c))
        level1.push(createRowOfBricks(c))
    }
 
    let currBricks: Brick[] = []
    for (let row = 0; row < level1.length; row ++) {
        for (let col = 0; col < level1[row].length; col ++) {
            currBricks.push({
                color: level1[row][col],
                width: BRICK_DIMENSION,
                height: BRICK_DIMENSION,
                x: BRICKS_X + (GAP_BTW_BRICKS + BRICK_DIMENSION) * col,
                y: BRICKS_Y + (GAP_BTW_BRICKS + BRICK_DIMENSION) * row
            })
        }
    }
    return currBricks
}
 
export const Arkanoid = React.memo(() => {
 
    const [ball,setBall] = useState({
        dirX: 0 as SPEED,
        x: ( CANVAS_WIDTH - BRICK_DIMENSION ) / 2,
        y: CANVAS_HEIGHT - BRICK_DIMENSION * 2,
        dirY: 0 as SPEED,
        width: BRICK_DIMENSION,
        height: BRICK_DIMENSION,
        speed: 1 as SPEED,
    })
    const [result, setResult] = useState<Array<boolean | string>>([false, ''])
    const [context,setContext] = useState<CanvasRenderingContext2D>()
    const [platform,setPlatform] = useState({
        dir: 0 as SPEED,
        x: ( CANVAS_WIDTH - PLATFORM_WIDTH ) / 2,
        y: CANVAS_HEIGHT - BRICK_DIMENSION,
        width: PLATFORM_WIDTH,
        height: BRICK_DIMENSION,
    })
    const [bricks,setBricks] = useState(createBricks())
    const [started, setStarted] = useState(false)
 
    useEffect(() => {
        if (ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH) {
            if (platform.dir || ! started) {
                setBall({
                    ...ball,
                    dirX: platform.dir
                })
            }
        }
    }, [ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH, platform.dir, started])
 
    useEffect(() => {
        if (ball.dirY) {
            setStarted(true)
        }
    }, [! ball.dirY])
 
    const onMount = () => {
        const callBack = (speed: SPEED) => (pr: Platform) => ({
            ...pr,
            dir: speed as SPEED
        })
        document.addEventListener('keydown', e => {
            switch (e.code) {
                case ARROW_LEFT:
                    //setPlatform(callBack(-1))
                    setPlatform(pr => ({
                        ...pr,
                        dir: -1 as SPEED
                    }))
                    break
                case ARROW_RIGHT:
                    //setPlatform(callBack(1))
                    break
                case SPACE:
                    setBall(pr => ({
                        ...pr,
                        dirY: -pr.speed as SPEED,
                        dirX: pr.speed
                    }))
                    break
                default:
                    console.log('unknown command')
            }
        })
        document.addEventListener('keyup', e => {
            switch (true) {
                case e.code === ARROW_LEFT || e.code === ARROW_RIGHT:
                    setPlatform(pr => ({
                        ...pr,
                        dir: 0 as SPEED
                    }))
                    break
                default:
                    console.log('unknown command')
            }
        })
    }
 
    useEffect(() => {
        onMount()
    }, [])
 
    const collided = (o1: Ball, o2: Brick) => {
        const x1 = [o1.x, o1.x + o1.width]
        const x2 = [o2.x, o2.x + o2.width]
        const smallFuncX = (i: number) => x2[i] > x1[0] && x2[i] < x1[1]
        const byOx = smallFuncX(0) || smallFuncX(1)
        const y1 = [o1.y, o1.y + o1.height]
        const y2 = [o2.y, o2.y + o2.height]
        const smallFuncY = (i: number) => y2[i] > y1[0] && y2[i] < y1[1]
        const byOy = smallFuncY(0) || smallFuncY(1)
 
        return byOx && byOy
    }
 
    const gameIteration = () => {
        if (context) {
            context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
 
            //moving platform
            setPlatform(pr => ({
                ...pr,
                x: pr.x + pr.dir
            }))
            if (platform.x < 0) {
                setPlatform(pr => ({
                    ...pr,
                    x: 0,
                    dir: -pr.dir as SPEED
                }))
            } else if (platform.x + PLATFORM_WIDTH > CANVAS_WIDTH) {
                setPlatform(pr => ({
                    ...pr,
                    x: CANVAS_WIDTH - PLATFORM_WIDTH,
                    dir: -pr.dir as SPEED
                }))
            }
 
            //moving the ball
            setBall(pr => ({
                ...pr,
                x: pr.x + pr.dirX,
                y: pr.y + pr.dirY
            }))
            if (ball.x <= 0) {
                setBall(pr => ({
                    ...pr,
                    dirX: 1
                }))
            } else if (ball.x + BRICK_DIMENSION >= CANVAS_WIDTH) {
                setBall(pr => ({
                    ...pr,
                    dirX: -1
                }))
            }
            if (ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH) {
                if (ball.dirY) {
                    setBall(pr => ({
                        ...pr,
                        dirY: -1
                    }))
                }
            } else if (ball.y <= 0) {
                setBall(pr => ({
                    ...pr,
                    dirY: 1,
                    y: 1
                }))
            } else if (ball.y > CANVAS_HEIGHT - BRICK_DIMENSION) {
                setResult([true, LOSS_TEXT])
            }
 
            //removing the bricks
            setBricks(bricks.filter(b => ! collided(ball, b)))
 
            //tracing the platform
            context.fillStyle = 'blanchedalmond'
            context.shadowOffsetX = -1
            context.shadowOffsetY = -1
            context.shadowBlur = 3
            context.shadowColor = 'lightblue'
            context.fillRect(platform.x, platform.y, platform.width, platform.height)
 
            //tracing the bricks
            bricks.forEach(b => {
                context.fillStyle = b.color
                context.fillRect(b.x, b.y, b.width, b.height)
            })
 
            if (! bricks.length) {
                context.fillStyle = 'blue'
                context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
                setResult([true, VICTORY_TEXT])
            }
 
            //drawing the ball
            let sm = new Image();
            sm.src = BALL;
            context.shadowColor = 'yellow'
            context.shadowOffsetX = -1
            context.shadowOffsetY = -1
            context?.drawImage(sm, ball.x, ball.y, ball.width, ball.height);
        }
    }
 
    requestAnimationFrame(gameIteration)
 
    return <div className={'mainContainer'}>
        <Button id='start' onClick={у => {
            const canvas: any = document.getElementById('canvas')
            document.getElementById('start')?.setAttribute('disabled', 'true')
            setContext(canvas.getContext("2d"));
        }}>начать игру</Button>
        <Modal
            className={`mod ${result[1] === LOSS_TEXT && 'modLost'}`}
            centered
            show={result[0] as boolean}
            onHide={
                () => setResult(Object.assign([], false, result[1]))
            }
            backdrop="static"
            keyboard={false}
        >
            <Modal.Body className={'modalBody'}>
                <Modal.Title>{result[1]}</Modal.Title>
            </Modal.Body>
            <Modal.Footer className = 'modalFooter'>
                <Button variant="light" onClick={() => window.location.reload()}>ok</Button>
            </Modal.Footer>
        </Modal>
        <canvas id={'canvas'} width={CANVAS_WIDTH} height={CANVAS_HEIGHT}>
        </canvas>
    </div>
})

case ARROW_LEFT:
  setPlatform(pr => ({
    ...pr,
    dir: -1 as SPEED
  }))
  break

case ARROW_RIGHT:
  setPlatform(pr => ({
    ...pr,
    dir: 1 as SPEED
  }))
  break

useEffect(() => {
        if (ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH) {
            if (platform.dir || ! started) {
                setBall({
                    ...ball,
                    dirX: platform.dir
                })
            }
        }
    }, [ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH, platform.dir, started])