Is it possible to put ternary conditional operator inside the other ternary conditional operator in jsx

I am trying to do what I mentioned in topic. I tried all methods I found and I dont even know if it is possible. Could you please help me?

<>
          {
          (isLoading) ? 
          <CircularProgress /> 
          : 
          {isTablet ? <MobileMenu /> : <Menu />}
          <Box
            sx={{
              display: "flex",
              flexDirection: { laptop: "row", mobile: "column" },
              justifyContent: "center",
              gap: "0px 100px",
              mt: {
                tablet: "40px"
              },
              maxWidth: "1920px",
              marginInline: "auto"
            }}
            onClick={() => {
              console.log(product);
            }}
          >
            {isMobile ? <MobileGallery /> : <Gallery />}
            <Description product={product} />
          </Box>}
          
    
        </>

Yes, any given component of the ternary conditional operator is an expression. And since the ternary conditional operator itself is an expression, it can be used as any such component. Expressions can be nested infinitely.

It appears that what you have is simply a JSX syntax error. Simplifying what you're showing, this structure is incorrect:

{
  isLoading ? 
  <CircularProgress /> : 
  {isTablet ? <MobileMenu /> : <Menu />}
}

The "inner" set of curly braces are unnecessary and will break the language parsing. At this point in the syntax it would be expecting { to indicate the start of an object literal, which isn't what the code is doing.

You can simply remove them:

{
  isLoading ? 
  <CircularProgress /> : 
  isTablet ? <MobileMenu /> : <Menu />
}

For clarity and/or personal preference you can also wrap that expression in parentheses:

{
  isLoading ? 
  <CircularProgress /> : 
  (isTablet ? <MobileMenu /> : <Menu />)
}

Indentation is another option to indicate the nested expressions:

{
  isLoading ? 
    <CircularProgress /> : 
    isTablet ?
      <MobileMenu /> :
      <Menu />
}