Tengo una canalización de compilación en Azure DevOps con la que intento compilar una aplicación React Typescript de front-end. Esta aplicación usa Material ui y el problema parece estar relacionado con el código de esa biblioteca. He creado este proyecto antes, pero por alguna razón, ahora, cuando ejecuto la compilación, aparece este código de error:

 'Box' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<BoxProps, any, any> | null' is not a valid JSX element. Type 'Component<BoxProps, any, any>' is not assignable to type 'Element | ElementClass | null'. Type 'Component<BoxProps, any, any>' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/home/vsts/work/1/s/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. TS2786 68 | <React.Fragment> 69 | <div> > 70 | <Box component="nav" className={classes.Nav}> | ^ 71 | <AppBar position="relative" className={classes.appBarStyles}> 72 | <Toolbar className={classes.toolbarStyles}> 73 | <div className={classes.toggleSlider}>

Aquí está el código para la barra de navegación:

 return ( <React.Fragment> <div> <Box component="nav" className={classes.Nav}> <AppBar position="relative" className={classes.appBarStyles}> <Toolbar className={classes.toolbarStyles}> ..... </Toolbar> </AppBar> </Box> </div> </React.Fragment> );

He actualizado las versiones de materialui, react y react-dom, así como los tipos mecanografiados; He intentado encerrar el elemento Box con un div y he intentado usar el indicador de ignorar mecanografiado, pero nada de eso parecía haber resuelto el problema.

He podido compilar este proyecto antes, por lo que no estoy tan seguro de dónde proviene el error. Cualquier ayuda es apreciada, gracias.