chore: upgrade libraries to latest versions

.nvmrc

@@ -1 +1 @@
-v16.13.0
+v20.5.1

components/Checklist.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 
 import { useViewContext } from "../context/ViewContext";
 import { cycleStatus, useDecorCollection } from "../hooks/useDecorCollection";
@@ -15,20 +15,10 @@ export const Checklist: React.FC = () => {
   const { collection, get, set, clear } = useDecorCollection();
   const { view } = useViewContext();
 
-  React.useEffect(() => {
-    // ReactTooltip needs to be told when tooltipped elements on the page change.
-    ReactTooltip.rebuild();
-  }, [view]);
-
   return (
     <>
       <TopToolbar />
-      <ReactTooltip
-        place="right"
-        effect="solid"
-        backgroundColor="black"
-        textColor="white"
-      />
+      <Tooltip id="decor-title-tooltip" place="right" variant="dark" />
       <table className={styles.table}>
         <thead>
           <tr>
@@ -65,7 +55,7 @@ export const Checklist: React.FC = () => {
                     );
                   })}
                 </tr>
-              )
+              ),
           )}
         </tbody>
       </table>

components/DecorHeader.tsx

@@ -30,7 +30,8 @@ export const DecorHeader: React.FC<DecorHeaderProps> = ({ decor }) => {
     <Image
       loader={decorLoader}
       alt={decor.title}
-      data-tip={tooltip}
+      data-tooltip-id="decor-title-tooltip"
+      data-tooltip-content={tooltip}
       src={getDecorIcon(decor.key)}
       width={imageSize}
       height={imageSize}

context/ViewContext.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import { CollectionView } from "../utils/types";
+import { PropsWithChildren } from "react";
 
 export interface ViewContextValue {
   view: CollectionView;
@@ -16,9 +17,11 @@ export const useViewContext = () => React.useContext(ViewContext);
 
 const storageKey = "decorView";
 
-export const ViewContextProvider: React.FC = ({ children }) => {
+export const ViewContextProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
   const [view, setInternalView] = React.useState<CollectionView>(
-    CollectionView.Advanced
+    CollectionView.Advanced,
   );
   React.useEffect(() => {
     const storedView = localStorage.getItem(storageKey) as CollectionView;
@@ -31,7 +34,7 @@ export const ViewContextProvider: React.FC = ({ children }) => {
       setInternalView(updatedView);
       localStorage.setItem(storageKey, updatedView);
     },
-    [setInternalView]
+    [setInternalView],
   );
   const context = { view, setView };
 

next.config.js

@@ -1,9 +1,8 @@
-const withPWA = require('next-pwa');
+const withPWA = require("next-pwa")({
+  dest: "public",
+});
 
 module.exports = withPWA({
-  pwa: {
-    dest: 'public'
-  },
   reactStrictMode: true,
   images: {
     loader: "custom",