I'm not sure if it's a ReactJS lack of understanding, but since I'm coding this on NextJS, I decided to post it here.

I have a local component inside of my main component and it re-renders every time the state from the main component changes. If the local component remains the same, nothing has changed from it, why does it re-render? How do I prevent this from re-rendering and only make it re-render if there's a change in the child component? I'm trying to structure my code, but came across this issue. This is a sample code:

import { useState } from "react"

const LocalComponent = () => {
    console.log("My comp")
    return <div>Local Component</div>
}

export default function MainComponent() {
    const [count, setCount] = useState(0)


    return <>
        <div onMouseEnter={() => setCount(e => e + 1)} style={{ background: "#423eee", padding: "10px", width: "fit-content" }}>Hover</div>
        Main Component {count}
        <LocalComponent></LocalComponent>
    </>
}