React bubbling with nested onFocus and OnBlur

Question

I have a scenario with three components, each handling onFocus and onBlur separately. While each component works well individually, I'm encountering an issue when they work together as parent, child, and grandchild.

I'll provide a simplified example that exhibits similar behavior:

const handleFocusParent = (e) => {
    e.stopPropagation();
    console.log("Focus: Parent is focused");
}

const handleBlurParent = (e) => {
    e.stopPropagation();
    console.log("Blur: Parent loses focus");
}

return (
    <div
        style={{ width: "500px", height: "800px", border: "1px solid black" }}
        onFocus={handleFocusParent}
        onBlur={handleBlurParent}
        tabIndex={0}
    >
        <input
            type="text"
            onFocus={(e) => {
                e.preventDefault();
                // e.stopPropagation();
            }}
            onClick={(e) => {
                e.preventDefault();
                // e.stopPropagation();
            }}
        />
    </div>
);

The problem is that every time I focus on the input, the parent div loses focus.

1. The logs when I directly click on the input: "Focus: Parent is focused"

2. The logs when I click somewhere in the parent (not on the div) are: "Focus: Parent is focused"

However, when I click on the input, the problem occurs, and the logs are: "Blur: Parent loses focus" "Focus: Parent is focused"

This behavior is problematic for me, as the parent should not lose focus when clicking on the input.

I tried to post this on Stack Overflow, but I received an error:

"Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut."

Can someone help me understand and resolve this issue?