I have this code in my pages/index.js file:

import React from 'react';
import dynamic from 'next/dynamic';

const TVChartContainer = dynamic(
    () =>
        import('../components/TVChartContainer').then(mod => mod.TVChartContainer),
    { ssr: false },
);

export default () => <TVChartContainer />;

And this gives me an error.

Anonymous arrow functions cause Fast Refresh to not preserve local component state. Please add a name to your function, for example:

Before export default () => ;

After const Named = () => ; export default Named;

A codemod is available to fix the most common cases: https://nextjs.link/codemod-ndc

And then I tried to export the component this way.

export default  TVChartContainer;

This also seems not fixing the issue. How do I fix this issue?