silly dom warning

src/App.js

@@ -10,7 +10,7 @@ import QUESTS_DATAMINE_SIGILS from './data/questDropsSigils.json';
 import SIGILS_CURIO from './data/curioSigils.json';
 import SIGILS_TRANS from './data/transmarvelSigils.json';
 import { IconButton, TextField } from '@mui/material';
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FiberNewIcon from '@mui/icons-material/FiberNew';
 import RestoreIcon from '@mui/icons-material/Restore';

src/components/QuestTableBeta.js

@@ -332,12 +332,14 @@ const QuestTableBeta = ({
     return <div>
       {curio.length > 0 && curio.map(x => {
         return <Paper className="oops curio" id="oops1" key={x} elevation={2}>
-          <Typography className="oopsText"><Typography className="oopsTextName">{x}</Typography> is only available through curios.</Typography>
+          <Typography className="oopsTextName">{x}</Typography>
+          <Typography className="oopsText"> is only available through curios.</Typography>
         </Paper>;
       })}
       {trans.length > 0 && trans.map(x => {
         return <Paper className="oops transmarvel" id="oops2" key={x} elevation={2}>
-          <Typography className="oopsText"><Typography className="oopsTextName">{x}</Typography> is only available through transmarvel.</Typography>
+          <Typography className="oopsTextName">{x}</Typography>
+          <Typography className="oopsText"> is only available through transmarvel.</Typography>
         </Paper>;
       })}
     </div>;

src/hooks/useThemeDetector.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 export const useThemeDetector = () => {
     const getCurrentTheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches;

src/index.css

@@ -39,10 +39,10 @@ code {
   margin: 0.25em 1em;
   padding: 0.5em 1em;
   font-style: italic;
+  display: flex;
 }
 .oopsText {
   font-family: monospace !important;
-  display: flex;
 }
 .oopsTextName {
   text-decoration: underline;