Странное предупреждение из-за импорта?

Question

Я получаю странное предупреждение и не понимаю почему:

Небольшое репозиторий Github для воспроизведения (запустите npm i, npm запустите dev). .

Обновление : после того, как я переместил все общие функции внешнего и внутреннего интерфейса в общую папку root - проблема исчезла.

Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function. For more information, see fb.me/rules-of-hooks
    in MyApp (at _document.tsx:12)
    in Context.Provider
    in Context.Provider
    in StyleSheetManager
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer
The component MainLayout__Wrapper with the id of "MainLayout__Wrapper-sc-13q3s8p-0" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

В tsconfig.json у меня есть пути:

"paths": {
      "@frontend": [
        "./frontend"
      ],
      "@backend": [
        "./backend"
      ]
    },

В бэкэнд-функции мутации graphql я загружаю функцию из внешнего интерфейса. Если я загружаю его как @frontend, я получаю, а не если я использую ../../frontend/functions/joi.

// no error - import { isValid } from "../../frontend/functions/joi";
// error - import { isValid } from "@frontend";
import { isValid } from "@frontend";

export const userCreate = async (): Promise<boolean> => {
  isValid();

  return true;
};

Во внешнем интерфейсе index.ts файл, я повторно экспортирую isValid функцию joi и MainLayout компонент реакции. Если я удалю предупреждение об экспорте компонента MainLayout, тоже исчезнет.

export * from "./functions/joi";

// no error if i delete this import
export * from "./layout/MainLayout";