如何分离成单独的组件

如何解决如何分离成单独的组件

我试图输出第一个和第二个来分隔文件，但由于存在钩子useTranslation，它不起作用，

如何输出第一个和第二个以分离组件？

export const Admin: FunctionComponent = () => {
    const { t } = useTranslation(['adminPage','button']);

    const first = [
        <Resource
            options={{label: t('adminPage:dashboard')}}
            name='dashboard'
            list={first}
        />,];

    const second = [
        <Resource
            options={{label: t('adminPage:dashboard')}}
            name='dashboard'
            list={second}
        />,]

    const getResources = (roles: TRoles) => {
        const resources = [
            ...first,...second
        ];
        return Promise.resolve(resources);
    };

    return (
        <div>
            <ReactAdmin
                authProvider={authProvider}
                loginPage={AdminSignIn}
                dataProvider={dataProvider}
                logoutButton={() => <AdminlogoutButton>{t('button:logout')}</AdminlogoutButton>}
                history={history}
                theme={theme}
            >
                {getResources}
            </ReactAdmin>
        </div>
    );
};