Example of terms and conditions in different languages using markdown and dynamic import

TermsAndConditions.tsx

import React, { useEffect, useState } from 'react';
import i18next from 'i18next';
import { getCurrentLanguage } from '@Utils/language';
import ReactMarkdown from 'react-markdown';
import Loader from '@Loader';

type MarkdownContent = string | undefined;
const TermsAndConditions = (): JSX.Element => {
  const currentLanguage = getCurrentLanguage(i18next.languages); // it returns i18next.languages[0] -> 'es', 'fr', 'en' etc. 
  const [getTermsAndConditions, setTermsAndConditions] = useState<MarkdownContent>(undefined);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    const grabTermsAndConditions = async (): Promise<void> => {
      const termsAndConditionsFile = await import(
        `./markdown/TermsAndConditions.${currentLanguage}.md`
      );
      const termsAndConditionsContent = await fetch(termsAndConditionsFile.default);
      const text = await termsAndConditionsContent.text();
      setTermsAndConditions(text);
      setIsLoading(false);
    };
    grabTermsAndConditions();
  }, [currentLanguage]);

  return (
    <div className="container">
      <Loader isLoading={isLoading} width={200} height={200}>
        <ReactMarkdown source={getTermsAndConditions} />
      </Loader>
    </div>
  );
};

export { TermsAndConditions };