Translated pages render parent page metatags and title instead of translated page metatags and title

Problem

Pages (example articles) that are created with the translation management tool render the original parent page title and metatags, as opposed to the title and metatags set on the translated page. If an alternative method of creating the translated page is used, like using localization (or creating the translated page directly and linking it to the parent page), then the translated pages do correctly render their own metatags and page title.

How to recreate the problem

Setup the sandbox

Visit this url: https://simplytest.me/project/tmgmt/7.x-1.x and install sandbox

Login and install https://ftp.drupal.org/files/projects/metatag-7.x-1.21.tar.gz
Enable the following modules: token, metatag, internationalization, multilingual content

Add the following settings to article content type:

admin/structure/types/manage/article
click publishing options tab
Check enabled with translation
Save content type
admin/structure/types/manage/article
Click multilingual tab
Check Require language, Lock language and Normal.
Save content type

Create and English article and translate it to German using TMGMT - and add metatags to both English and German articles

Create a test English
View article and click on translation tab
Check German and click request translation
Click submit to translator
Click in progress (within the translation tab)
Translate the content and approve

Edit the German article
Add German metatags (page title, description and keywords) and make sure the page is published
Save
Now view the German page
View German page source
Notice that its title, metatag description and its metatag keywords are in English and not German.

The same problem exists even if we add this configuration
/admin/config/search/metatags/settings
check Translate output