diff --git a/plugins/api-docs/package.json b/plugins/api-docs/package.json
index 434abd130f..a2ec96ee67 100644
--- a/plugins/api-docs/package.json
+++ b/plugins/api-docs/package.json
@@ -29,7 +29,6 @@
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
-    "@types/react": "^16.9",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "6.0.0-beta.0",
@@ -45,6 +44,7 @@
     "@testing-library/user-event": "^12.0.7",
     "@types/jest": "^26.0.7",
     "@types/node": "^12.0.0",
+    "@types/react": "^16.9",
     "@types/swagger-ui-react": "^3.23.3",
     "jest-fetch-mock": "^3.0.3"
   },
diff --git a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx b/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx
index 99848637b6..3b954b5a86 100644
--- a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx
+++ b/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Entity } from '@backstage/catalog-model';
 import { Table, TableColumn } from '@backstage/core';
 import { Link } from '@material-ui/core';
diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
index af101f0194..d5bd9d1851 100644
--- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
+++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
@@ -16,13 +16,15 @@
 
 import { ApiEntityV1alpha1 } from '@backstage/catalog-model';
 import { InfoCard } from '@backstage/core';
-import React, { FC } from 'react';
+import React from 'react';
 import { ApiDefinitionWidget } from '../ApiDefinitionWidget/ApiDefinitionWidget';
 
-export const ApiDefinitionCard: FC<{
+type Props = {
   title?: string;
   apiEntity: ApiEntityV1alpha1;
-}> = ({ title, apiEntity }) => {
+};
+
+export const ApiDefinitionCard = ({ title, apiEntity }: Props) => {
   const type = apiEntity?.spec?.type || '';
   const definition = apiEntity?.spec?.definition || '';
 
diff --git a/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx b/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx
index 5b1ddd7880..0ea894b5a2 100644
--- a/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx
+++ b/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx
@@ -14,15 +14,17 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
+import React from 'react';
 import { AsyncApiDefinitionWidget } from '../AsyncApiDefinitionWidget/AsyncApiDefinitionWidget';
 import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget/OpenApiDefinitionWidget';
 import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget/PlainApiDefinitionWidget';
 
-export const ApiDefinitionWidget: FC<{
+type Props = {
   type: string;
   definition: string;
-}> = ({ type, definition }) => {
+};
+
+export const ApiDefinitionWidget = ({ type, definition }: Props) => {
   switch (type) {
     case 'openapi':
       return <OpenApiDefinitionWidget definition={definition} />;
@@ -31,6 +33,8 @@ export const ApiDefinitionWidget: FC<{
       return <AsyncApiDefinitionWidget definition={definition} />;
 
     default:
-      return <PlainApiDefinitionWidget definition={definition} />;
+      return (
+        <PlainApiDefinitionWidget definition={definition} language={type} />
+      );
   }
 };
diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
index 5e08af7e8e..6717222a8e 100644
--- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
+++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
@@ -29,7 +29,7 @@ import {
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import { Box } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import { ApiDefinitionCard } from '../ApiDefinitionCard/ApiDefinitionCard';
@@ -59,15 +59,18 @@ export const getPageTheme = (entity?: Entity): PageTheme => {
   return pageTheme[themeKey] ?? pageTheme.home;
 };
 
-const EntityPageTitle: FC<{ title: string; entity: Entity | undefined }> = ({
-  title,
-}) => (
+type EntityPageTitleProps = {
+  title: string;
+  entity: Entity | undefined;
+};
+
+const EntityPageTitle = ({ title }: EntityPageTitleProps) => (
   <Box display="inline-flex" alignItems="center" height="1em">
     {title}
   </Box>
 );
 
-export const ApiEntityPage: FC<{}> = () => {
+export const ApiEntityPage = () => {
   const { optionalNamespaceAndName } = useParams() as {
     optionalNamespaceAndName: string;
   };
diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx
index ce372e3cdc..01e2ac33a7 100644
--- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx
+++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx
@@ -15,7 +15,7 @@
  */
 
 import AsyncApi from '@kyma-project/asyncapi-react';
-import React, { FC } from 'react';
+import React from 'react';
 import { makeStyles, fade } from '@material-ui/core/styles';
 import '@kyma-project/asyncapi-react/lib/styles/fiori.css';
 
@@ -135,9 +135,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const AsyncApiDefinitionWidget: FC<{
+type Props = {
   definition: any;
-}> = ({ definition }) => {
+};
+
+export const AsyncApiDefinitionWidget = ({ definition }: Props) => {
   const classes = useStyles();
 
   return (
diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx
index d4fe2ab9e1..61f5cb2b75 100644
--- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx
+++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
@@ -65,9 +65,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const OpenApiDefinitionWidget: FC<{
+type Props = {
   definition: any;
-}> = ({ definition }) => {
+};
+
+export const OpenApiDefinitionWidget = ({ definition }: Props) => {
   const classes = useStyles();
 
   // Due to a bug in the swagger-ui-react component, the component needs
diff --git a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx
index 4ceeed06e1..46631c5a4b 100644
--- a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx
+++ b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx
@@ -15,10 +15,13 @@
  */
 
 import { CodeSnippet } from '@backstage/core';
-import React, { FC } from 'react';
+import React from 'react';
 
-export const PlainApiDefinitionWidget: FC<{
+type Props = {
   definition: any;
-}> = ({ definition }) => {
-  return <CodeSnippet text={definition} language="yaml" />;
+  language: string;
+};
+
+export const PlainApiDefinitionWidget = ({ definition, language }: Props) => {
+  return <CodeSnippet text={definition} language={language} />;
 };