React.JS Parsing Error for ternary conditional operation component rendering

I am trying to create a nested if statement within a nested if statement using ternary operations. However, I am encountering an error when trying to do so. Here is my code:

{count > 0 ? ( 
  <>
    <div className={styles["tab-container"]}>
      <TabLayout>
        <Tab />
        <Tab />
        <ToggleSwitch toggleBool={toggleView} /> 
      </TabLayout>
    </div>
    {isListView ? ( 
      selectedTab === ACTIVE ? (
        <InstructionsTab />
      ) : (
        <InstructionsPastTab /> 
      )
    ) : (
      <InstructionsDiffViewTab />
    )}

  </>
) : (
  <NoInstructions />
)}

I get a parsing error "Unexpected token, expected ','" on the third inner ternary conditional statement (selectedTab === ACTIVE) and I can't figure out why. I have tried playing around with the <> and </> dividers to see if it is a sectioning issue, but to no avail. I don't understand why the last inner conditional statement is wrong when the outer two have no issues at all, even when I remove it.

This question is a continuation of another question.

I guess you broke one of the React JSX rules : Return Single Element . So you have to return the whole bunch of code wrapped in ONE top level element .

just change your code like this :

return (
<div> // this is a ONE top level element 
  // pass your code in the question here 
</div>
)