[SOLVED] How to hide a datetime field using form states api

I'm creating some additional functionality for a module and as a part of that I'd like to use the form state API to conditionally show and hide some elements. I've been able to toggle the visibility of a textfield using a select field but when i attempt to do the same for a datetime or table select field, it doesn't work and I'm sure why. Here's my code:

$form['duration'] = [
  '#type' => 'select',
  '#title' => t('Lifetime'),
  '#options' => [
    60 => t('@days Days', ['@days' => 1]),
    172800 => t('@days Days', ['@days' => 2]),
    345600 => t('@days Days', ['@days' => 4]),
    604800 => t('@days Days', ['@days' => 7]),
    1209600 => t('@days Days', ['@days' => 14]),
    -1 => t('Unlimited'),
    'other' => t('Custom'),
  ],
  '#default_value' => '',
  '#attributes' => [
    'id' => 'edit-duration',
  ],
];

// Elements inside container are hidden by default and are shown when other
// is selected from the select list above.
$form['container'] = [
  '#type' => 'container',
  '#states' => [
    'visible' => [
      '[name="duration"]' => ['value' => 'other'],
    ],
  ],
];

// todo:// Add today's date as default if one doesn't exist in config.
$form['container']['expiration'] = [
  '#type' => 'datetime',
  '#title' => $this->t('Content expiration'),
  '#default_value' => DrupalDateTime::createFromTimestamp($config->get('custom_date')),
];

$bundles = \Drupal::service('entity_type.bundle.info')->getBundleInfo('node');

$options = $defaults = [];
foreach ($bundles as $bundle_id => $bundle) {
  $options[$bundle_id] = [
    'title' => ['data' => ['#title' => $bundle['label']]],
    'type' => $bundle['label'],
  ];
}

$selected_types = $config->get('selected_content_types');

foreach ($selected_types as $key => $type) {
  $defaults[$type] = TRUE;
}

if (!empty($options)) {
  $form['container']['bundles'] = [
    '#type' => 'tableselect',
    '#header' => [
      'type' => 'Content types',
    ],
    '#options' => $options,
    '#default_value' => $defaults,
    '#attributes' => [
      'class' => [
        'no-highlight'
      ],
    ],
  ];

  $form['bundles']['#attributes']['class'][] = 'content-type-table';
}

any help/tips would be greatly appreciated, thanks in advance !

UPDATE: I've now update code so that both the elements i want to hide are inside a container and I've added the states visible property on the container as per wombatbuddy's comment and it works.