export const MainLayout = () => {
  return <div>Layout</div>;
};

Then make sure u're importing it like this:

import { MainLayout } from './MainLayout';

Don't do this if it's a named export:

import MainLayout from './MainLayout'; // this will cause the "got: object" error

OR if u're using default export:

const MainLayout = () => {
  return <div>Layout</div>;
};

export default MainLayout;

Then import it like this:

import MainLayout from './MainLayout';

Just double-check whether u're using export default or export const and make sure the import matches.

Hope this helps