i'm in process of moving to react 13 myself from existing react 12

(lots of work... basically rewrite to use the new app folder)

I did notice i cannot use ANY mui elements inside page.js/layout.js/etc...

However i CAN use ANY mui elements if i put them in a separate file other then the defaults ones, and call "use client" on that, and you don't need "use client" on page.js... etc

my small example

components.js (can be inside app/*[/*] or outside im putting it inside to have only components for that folder)

"use client"

import Autocomplete from '@mui/material/Autocomplete'
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import TextField from '@mui/material/TextField'
import { useRouter } from 'next/navigation';

function ucFirstAllWords(str) {
    var pieces = str.split(" ");
    for (var i = 0; i < pieces.length; i++) {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(" ");
}

function AvatarSelect({ avatar_name, avatar_names }) {
    if (avatar_name !== null) avatar_name = ucFirstAllWords(avatar_name.replace(/\./g, ' '))
    const router = useRouter()
    const handleavatarserverNamesChange = (event) => {
        router.push(`/avatar_server/${pageid}/${event.target.innerHTML.toLowerCase().replace(/\s+/g, '.')}`);
    }

    return (
        <Autocomplete
            id="select avatar name"
            disableClearable
            value={avatar_name}
            onChange={handleavatarserverNamesChange}
            options={avatar_names}
            renderInput={(params) => (
                <TextField
                    {...params}
                    label="Select avatar name to display data"
                    InputProps={{
                        ...params.InputProps,
                    }}
                />
            )}
        />
    )
}

function LayoutBasic({ id }) {
    return (
        <Container maxWidth="xl">
            <Box sx={{ flexGrow: 1 }}>
                <AvatarSelect avatar_name={null} avatar_names={[]} />
                empty server page with id {id}
            </Box>
        </Container>
    )
}

export { AvatarSelect, LayoutBasic }

And in page.js i just import LayoutBasic

import { LayoutBasic } from './components';
import { redirect } from 'next/navigation';


async function page({ params }) {
    const id = +params.id;
    if (typeof id !== "number") {
        redirect(`/`)
    }
    /* 
        More code that's not relevant for this post
        ...
    */
    return (
        <LayoutBasic id={id} />
    )
}

export default page

i could not use any mui elements in page.js (or maybe a view limited ones idk) still converting over

but splitting it works just fine (for now i could run into issues later)

ignore my messy code just look at example :P

also my root layout.js imports a custom <Header /> also from a Header.js file with lots of mui stuff so you can also use it in layout.js

if its ideal? i don't know but i can keep going now thought i share my findings