TextArea will not display user input

Question

TextArea will not display any information whatsoever. My goal is to display user input from TextField into TextArea. Here is my controller file:

package application.controller;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;

public class MainController implements EventHandler<ActionEvent>{


@FXML
TextField starshipname;
TextArea shipInfo = new TextArea();
Button shipEnter;

@Override
public void handle( ActionEvent event) {

    shipInfo.appendText(starshipname.getText());

}

I have looked at other posts similar to my issue, but none of them resolve what's going on. I have tried several things like, shipInfo.setText("test"), removing the new TextArea(); gives me a NullPointerException error. Ultimately, I want to call another function from the controller to display specific information on TextArea based on the users input. First, I want to make sure I can display on the TextArea at all. Here is my main file:

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;


public class Main extends Application {

public static Stage stage;

@Override
public void start(Stage primaryStage) {

     try {
         Parent root = FXMLLoader.load(getClass().getResource("../Main.fxml"));
         primaryStage.setScene(new Scene(root, 800, 800));
         primaryStage.show();

         stage = primaryStage;

     } catch(Exception e) {
         e.printStackTrace();
     }
}

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

Here is also my Main.fxml file:

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

<?import javafx.scene.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefHeight="800.0" prefWidth="800.0" 
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" 
fx:controller="application.controller.MainController">
<children>
  <Label alignment="CENTER" prefHeight="179.0" prefWidth="800.0" 
text="United Federation of Planets" textAlignment="CENTER">
     <font>
        <Font name="Old English Text MT" size="40.0" />
     </font>
  </Label>
  <Label alignment="CENTER" layoutX="35.0" layoutY="50.0" prefHeight="90.0" prefWidth="93.0" text="O">
     <font>
        <Font name="Old English Text MT" size="96.0" />
     </font>
  </Label>
  <Label alignment="CENTER" layoutX="7.0" prefHeight="111.0" prefWidth="93.0" text="O">
     <font>
        <Font name="Old English Text MT" size="96.0" />
     </font></Label>
  <Label layoutX="81.0" layoutY="-6.0" text="O">
     <font>
        <Font name="Old English Text MT" size="96.0" />
     </font>
  </Label>
  <Label layoutX="217.0" layoutY="179.0" text="Enter a starship name to view personnel:">
     <font>
        <Font name="Centaur" size="25.0" />
     </font>
  </Label>
  <TextField fx:id="starshipname" layoutX="257.0" layoutY="223.0" prefHeight="0.0" prefWidth="275.0">
     <font>
        <Font name="Centaur" size="18.0" />
     </font>
  </TextField>
  <Button fx:id="shipEnter" layoutX="360.0" layoutY="278.0" mnemonicParsing="false" onAction="#handle" prefHeight="36.0" prefWidth="82.0" text="Submit">
     <font>
        <Font name="Centaur" size="17.0" />
     </font>
     <effect>
        <DropShadow blurType="TWO_PASS_BOX">
           <input>
              <InnerShadow />
           </input>
        </DropShadow>
     </effect>
  </Button>
  <TextArea fx:id="shipInfo" editable="false" layoutX="54.0" layoutY="330.0" prefHeight="409.0" prefWidth="692.0">
     <font>
        <Font name="Centaur" size="18.0" />
     </font>
  </TextArea>
  </children>
  <opaqueInsets>
  <Insets />
  </opaqueInsets>
 </AnchorPane>

Any help is greatly appreciated.