Testcafe - Populate input field based on dropdown selection

I'm not an expert in Javascript by any means and just getting my head round testcafe which I'm really enjoying.

However as a simple test I'm trying to populate a input field based on what was selected from a dropdown. Really simple, it's a Title field, so Mr, Mrs, etc.. Based on if 'Mr' was selected then populate with male name. If 'Mrs' then populate will female name.

However I'm unable to read the value chosen once it has been selected to pass into my If...else statement and it always goes to the default last option. Can somebody help me?

My code:

import { Selector } from 'testcafe';

const TitleSelect = Selector('#title');
const TitleOption = TitleSelect.find('option');
const FirstName = Selector('#firstname');

fixture `Getting Started`
.page //any page with a Title dropdown and Firstname input field;

test('My first test', async t => {
await t
    .click(TitleSelect)
    .click(TitleOption.withText('Mrs'))

    if (TitleOption === 'Mr') {
        await t
        .wait(1000)
        .typeText(FirstName, "Wayne")

    } else if (TitleOption === 'Mrs') {
        await t
        .wait(1000)
        .typeText(FirstName, "Waynetta")

    } else {
        await t
        .typeText(FirstName, "something else");
    } 

    await t
    .takeScreenshot({
        path: 'If_else_statment.jpg',
        fullPage: true
      })
    .wait(2000)   
    ;        
  });