porting over some ssr react code, getting different behavior

// foo.tsx
"use client";

import { useEffect, useState } from "react";

export default function Foo() {
    const [foo, setFoo] = useState<HTMLDivElement | null>(null);
    const isFormControl = foo ? Boolean(foo.closest("form")) : true;

    console.log(isFormControl);
    useEffect(() => {
        console.log(isFormControl);
    }, [isFormControl]);

    return (
        <>
            <div ref={node => setFoo(node)}>hello world</div>
            {isFormControl && <div>hello world 2</div>}
        </>
    );
}

// foo.tsx
"use client";

import { useEffect, useState } from "react";

export default function Foo() {
    const [foo, setFoo] = useState<HTMLDivElement | null>(null);
    const isFormControl = foo ? Boolean(foo.closest("form")) : true;

    console.log(isFormControl);
    useEffect(() => {
        console.log(isFormControl);
    }, [isFormControl]);

    return (
        <>
            <div ref={node => setFoo(node)}>hello world</div>
            {isFormControl && <div>hello world 2</div>}
        </>
    );
}

// page.tsx
import Foo from "./test";

export default function Home() {
    return (
        <>
            {/* <form> */}
            <Foo />
            {/* </form> */}
            {/* <form> */}
            <Foo />
            {/* </form> */}
        </>
    );
}

// page.tsx
import Foo from "./test";

export default function Home() {
    return (
        <>
            {/* <form> */}
            <Foo />
            {/* </form> */}
            {/* <form> */}
            <Foo />
            {/* </form> */}
        </>
    );
}