(next-intl) Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Box)`, expected a ReactNode

Question

I'm currently in the process of internationalizing my Next.js application. However, when I utilize useTranslations() from next-intl, it triggers the warning:

Warning: Failed prop type: Invalid prop children supplied to ForwardRef(Box), expected a ReactNode

// page.tsx
import { unstable_setRequestLocale } from "next-intl/server";
import { Box, Grid } from "@mui/material";

import FeaturedListings from "./FeaturedListings";

export default function Home({
  params: { locale },
}: {
  params: { locale: string };
}) {
  unstable_setRequestLocale(locale);

  return (
    <Box pt={{ xs: 8, md: 0 }}>
      <FeaturedListings />
    </Box>
  );
}

// FeaturedListings.tsx

"use server";
import { FC } from "react";
import { useTranslations } from "next-intl";
import { Grid, Typography, Box, Container } from "@mui/material";

import { FeaturedListingsProps } from "./Types";

const FeaturedListings: FC<FeaturedListingsProps> = () => {
  const t = useTranslations();
  return (
    <Grid container spacing={4}>
      <Grid item xs={12}>
        <Typography variant="h3">{t("Metatags.Landing.title")}</Typography>
      </Grid>
    </Grid>
  );
};

export default FeaturedListings;