Pluralization in Angular i18next

Question

I am trying to display the no. of devices on the page using i18next. The goal is to show the following text depending on the number of devices:

if count = 0   | "vCenters"
if count = 1   | "1 vCenter"
if count n > 1 | "n vCenters"

I followed the following link for reference, but it didn't work for me.

https://www.i18next.com/translation-function/context#combining-with-plurals

bundle.json file

  "device_vcenter_zero": "vCenter",
  "device_vcenter_one": "1 vCenter",
  "device_vcenters_other": "{{count}} vCenters",

Ts File

    console.log(i18next.t('device', {context: 'vcenter', count: 0}));
    console.log(i18next.t('device', {context: 'vcenter', count: 1}));
    console.log(i18next.t('device', {context: 'vcenters', count: 2}));

I am getting the following error in the concole.

i18next::translator: missingKey en-US translation device device
i18next::translator: missingKey en-US translation device device
i18next::translator: missingKey en-US translation device device

What am I doing wrong?