_app file using stylis plugin

AppStyling.tsx

import React from 'react';
import { AppProps } from 'next/app';
import { StyleSheetManager } from 'styled-components';
import { StylisPlugin } from 'styled-components';
import stylisRTLPlugin from 'stylis-plugin-rtl';
import { useTranslation } from 'react-i18next';

const App = (props: AppProps): JSX.Element => {
  const { Component, pageProps, router } = props;

  const { locale } = router;
  const { i18n } = useTranslation();

  // Get direction based on locale
  const direction = i18n.dir(locale);

  return (
    <StyleSheetManager
      stylisPlugins={
        direction === 'rtl' ? [stylisRTLPlugin as unknown as StylisPlugin] : []
      }
    >
      <Component {...pageProps} />
    </StyleSheetManager>
  );
};

export default App;