How to hit React hook breakpoints in VS Code debugger?

In short, my VSCode debugger is able to hit all breakpoints except for the ones within React hooks (useEffect, setState) within my nextjs app.

For example, consider the following React function component:

export default function example() {
  console.log("breakpoint 1");
  useEffect(() => {
    console.log("breakpoint 2");
  });
  return (<div></div>);
}

Assuming I add a breakpoint at both console.log statements, the VS Code debugger will pause at breakpoint 1 but will not pause at breakpoint 2 even though console output shows that both lines are run.