как вынести в отдельные компоненты

я пробовал вынести в first и second отдельные файлы first.tsх и second.tsх но внутри каждого должен быть хук const { t } = useTranslation(['adminPage', 'button']); и я не особо понимаю как отделить

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>
    );
};