What is a proper way of using next-intl in a server component that is inside of a client component?

Question

I'm working on a project that uses next-intl for internationalization. I have both client and server components. This is how the simplified project structure look like:

|_ app
   |_ [locale]
      |_ page.js (SSR)
|_ components
   |_ Contact.jsx (SSR)
   |_ Menu.jsx (CSR)

where SSR is server-side rendered component and CSR is client-side rendered component.

In every component I have to use internationalized text depending on chosen language, moreover I use Contact component both in page.js and Menu.jsx.

I've tried putting useTranslations hook from next-intl in every component and in page.js, it works well, however when I use useTranslations in server-side component that is inside client-side component (Contact.jsx in Menu.jsx in this case) useTranslations doesn't work and text is not loading at all.

I've read in the documentation that it is preferred to get text via useTranslations in server-side component and pass it via props to client-side component, however it messes up my code. What's the better way of doing it?