[Frontend] - Remove React.FC

Spike Type

Technical

Goal

Stop using React.FC for components. Instead, use

const App = ({ message }: AppProps) => <div>{message}</div>;
const App = ({ message }: AppProps): JSX.Element => <div>{message}</div>;

Reason for Spike

Amongst other reasons, React.FC provides an implicit definition of children, so components will accept even if they are not supposed to.

For example, in AppMain.tsx, there are no type errors with this:

const AppMain: React.FC = () => {
  return (
	{/* here */}
	<AppPublic>
		<h1>Children!</h1>
	</AppPublic>
  );
};

even though AppPublic does not accept children (const AppPublic: React.FC = () => { ...)

It's been removed from create react app and replaced with function App() { ...

• https://github.com/facebook/create-react-app/pull/8177
• https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/

Additional notes

No response

Start by searching the repository for React.FC and inspect the AppMain.tsx and AppPublic examples mentioned in the issue. Replace the usages with the function forms described in the goal, preserving each component's props, and consider the work complete when no React.FC usages remain and the affected TypeScript code still type-checks.