I am having some trouble debugging my project.
I created a new project following the manual setup instructions using yarn to test this sample page:

'use client';

function sampleFunction(): void
{
    console.log('test message');
}

export default function Example() 
{
    return (
        <div>
            <button onClick={() => {sampleFunction()}}>
                asdf
            </button>
        </div>
    );
}

If I set a breakpoint in the Example function, it is hit in the vscode debugger when I refresh the page.
If I set a breakpoint in the sampleFunction function, it is never hit in the vscode debugger. I can see that the function is being called based on the output displayed in the debug console in the web browser when I click the button.

This is the launch configuration I am using:

{
    "version": "0.2.0",
    "configurations": [
        {
            "command": "yarn run dev",
            "name": "Launch",
            "request": "launch",
            "type": "node-terminal"
        }
    ]
}

What do I need to do for a breakpoint in a function like sampleFunction to be hit in vscode? What is the difference between the contexts in which these two functions are run that vscode breakpoints work in one but not the other?