Серверный компонент NextJS 14 после нажатия на переданную функцию начинает бесконечно перерисовываться

Я пытаюсь создать простую страницу с помощью NextJS.

Упрощенная структура выглядит так:

<page> // Client component
    <List onPress = {val =\> setState(val)} \> // Server component
    <Modal> // Client component
<page>

Список делается так:

interface Props {
setEmbedId: (value: string) => void
}

export const ImagesList = async ({ setEmbedId }: Props) => {
const images = await getData() as ProjectData[]

return <div className = "grid grid-cols-1 md:grid-cols-3">
    {images?.map(x => {
        return <div key = {x.id}>
            <ImageCell onClick = {() => {
                setEmbedId(x.videoUrl)
            }} title = {x.title} description = {x.description} />
        </div>
    })}
</div>
}

и родительский компонент выглядит так:

export default async function Home() {
const \[embedId, setEmbedId\] = useState("")
return <div onClick = {() => console.info("asas")}>
<TopMenu />
<ImagesList setEmbedId = {id => setEmbedId(id)} />
<ModalVideo embedId = {embedId} onClose = {() => { setEmbedId("") }} />
<About />
<Contacts />
</div>
}

Если у вас есть какая-то информация, пожалуйста, дайте мне знать :) Спасибо

Я пытался написать его сам, но после вызова setState он начинает перерисовываться. даже если я вызываю его из корня, он начинает перерисовываться. Итак, подведем итог: после первоначального рендеринга любой повторный рендеринг вызывает бесконечный повторный рендеринг.

Я пробовал гуглить и искать ответ в переполнении стека, но безуспешно.

Я ожидаю, что он не будет перерисовываться после повторного рендеринга родителя.