Refactor code that uses unstable nested components

[DarioR01]

Is your feature request related to a problem? Please describe.

no-unstable-nested-components is a new rule coming from eslint-config-airbnb to v19 that prevents the bad practice of creating a React component inside another React component.

Thanks to eslint-config-airbnb to v19 package major update we are now able to identify places in our code where we use this bad practice. We should refactor all places where we use unstable nested components before upgrading to this new major version.

Describe the solution you'd like

Fix all occurance of no-unstable-nested-component. To visualise a list of components that have this issue:

1. checkout into renovate/eslint-config-airbnb-19.x with git checkout renovate/eslint-config-airbnb-19.x
2. run yarn && yarn test:lint
3. Locate all files with no-unstable-nested-components error description on the output

Alternatively

1. Go to https://github.com/bbc/simorgh/runs/5754191013?check_suite_focus=true
2. Locate all files with no-unstable-nested-components error description

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Testing notes [Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

• [ ] This feature is expected to need manual testing.

Checklist

• [ ] (BBC contributors only) This issue follows the repository use guidelines

Additional context Add any other context or screenshots about the feature request here.