Why does my javaFX field reset in every keyframe?

Question

I'm trying to write a simple snake game using javaFX, and I'm currently working on the movement. I'm using a timeline to make the snake move every keyframe, and then register keyEvents to change directions. But everytime I change directions, the field instantly goes back to its initial value. I know my code is rough and messy, this is my first time properly working with javaFX. I also know that I should be segmenting my code more, but I really just want to get this part working. The issue is probably big and obvious, but I'm new and stupid, anybody know what's wrong? Thank you!

MAIN CODE:

public class Main2 extends Application {
    @FXML
    private Direction dir;
    
    @FXML
    private Canvas canvas;

    @FXML
    private Pane pane;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage){
        try {
            Pane root = FXMLLoader.load(getClass().getResource("Test.fxml"));
            primaryStage.setTitle("Snake");
            Scene scene = new Scene(root);
            Rectangle rec = new Rectangle(290,190,10,10);
            rec.setFill(Color.BLACK);
            root.getChildren().add(rec);
            primaryStage.setScene(scene);
            primaryStage.show();  
            root.requestFocus();
            dir = Direction.RIGHT;
            Timeline timeline = new Timeline(new KeyFrame(Duration.seconds(0.1),e->{
                
                System.out.println(dir);
                


            }));
            timeline.setCycleCount(Animation.INDEFINITE);
            timeline.play();
            
            
        } catch (Exception IOException) {
            // TODO: handle exception
        }
        
    }

    

    public void setDirection(Direction d){
        switch (d){
            case UP:
                dir = Direction.UP;
                break;
            case DOWN:
                dir = Direction.DOWN;
                break;
            case LEFT:
                dir = Direction.LEFT;
                break;
            case RIGHT:
                dir = Direction.RIGHT;
                break;
            default:
                break;

        }


    }

    @FXML
    void keyPressed(KeyEvent event) {
                switch (event.getCode()){
                    case RIGHT:
                        setDirection(Direction.RIGHT);
                        System.out.println(this.dir);
                        break;
                    case LEFT:
                        setDirection(Direction.LEFT);
                        System.out.println(this.dir);
                        break;
                    case DOWN:
                        setDirection(Direction.DOWN);
                        System.out.println(this.dir);
                        break;
                    case UP:
                        setDirection(Direction.UP);
                        System.out.println(this.dir);
                        break;
                    default:                        
                        break;


                }
    }


    

}

FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.layout.Pane?>


<Pane fx:id="pane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" onKeyPressed="#keyPressed" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Main2">
   <children>
      <Canvas fx:id="canvas" height="380.0" layoutX="9.0" layoutY="10.0" width="582.0" />
   </children>
</Pane>