Understanding JavaScript evaluation [duplicate]

I am fixing some code and trying to understand a certain evaluation that is happening. There was a little snippet written where 2 evaluations should happen like so :

const active = true;
const isPerson = true;
const person1Time = null;
const person2Time = null;

// this one is not working as intended
const original = !active && isPerson ? !person1Time : !person2Time;

console.log("original", original);

// fixed when second evaluation is wrapped in parens
const fix = !active && (isPerson ? !person1Time : !person2Time);

console.log("fixed", fix);

I was able to fix the code to the desired result by wrapping the ternary evaluation in parentheses. What I am wondering is - why it works like this? The !active evaluates to false, and the ternary evaluates to true, and a console.log(true && false), this evaluates to false. Perhaps I am misunderstanding something here.