import React , { useCallback , useState } from 'react' ; import { ArcadeImage , useInputEvent } from 'react-phaser-fiber' ; export interface PaddleProps { initialX : number ; initialY : number ; } function Paddle ( { initialX , initialY } , ref ) { const [ x , setX ] = useState ( initialX ) ; const updatePosition = useCallback ( ( pointer ) => { setX ( pointer . x ) ; } , [ ] ) ; useInputEvent ( 'pointermove' , updatePosition ) ; return ( < ArcadeImage ref = { ref } name = "paddle" x = { x } y = { initialY } texture = "assets" frame = "paddle1" immovable / > ) ; } export default React . forwardRef ( Paddle ) ;