chore: fix type issues

Author: stropitek

src/components/camera/CameraFeed.tsx

@@ -6,7 +6,7 @@ import { useCameraContext, useVideoStream } from './cameraContext';
 export default function CameraFeed({
   videoRef,
 }: {
-  videoRef: RefObject<HTMLVideoElement>;
+  videoRef: RefObject<HTMLVideoElement | null>;
 }) {
   const {
     cameraState: { selectedCamera },

src/components/camera/CameraSnapshotButton.tsx

@@ -2,17 +2,17 @@ import { Image, readCanvas } from 'image-js';
 import React, { RefObject } from 'react';
 
 interface CameraSnapshotButtonProps {
-  videoRef: RefObject<HTMLVideoElement>;
-  canvasRef: RefObject<HTMLCanvasElement>;
+  videoRef: RefObject<HTMLVideoElement | null>;
+  canvasRef: RefObject<HTMLCanvasElement | null>;
   onSnapshot: (image: Image) => void;
   disabled?: boolean;
 }
 
 export default function CameraSnapshotButton(props: CameraSnapshotButtonProps) {
   const { videoRef, onSnapshot, canvasRef, disabled } = props;
   function handleClick() {
-    if (videoRef.current) {
-      const canvasInput = canvasRef.current as HTMLCanvasElement;
+    if (videoRef.current && canvasRef.current) {
+      const canvasInput = canvasRef.current;
       const video = videoRef.current;
 
       canvasInput.height = video.videoHeight;

src/components/camera/cameraContext.tsx

@@ -1,4 +1,10 @@
-import { createContext, Dispatch, useContext, useEffect } from 'react';
+import {
+  createContext,
+  Dispatch,
+  RefObject,
+  useContext,
+  useEffect,
+} from 'react';
 
 export interface CameraState {
   cameras: MediaDeviceInfo[];
@@ -49,7 +55,7 @@ export function isSameCamera(
   return false;
 }
 
-export function useVideoStream(videoRef: React.RefObject<HTMLVideoElement>) {
+export function useVideoStream(videoRef: RefObject<HTMLVideoElement | null>) {
   const {
     cameraState: { selectedCamera },
     dispatch,

src/demo/contexts/demo/demoReducer.ts

@@ -1,7 +1,6 @@
 import { assertUnreachable } from '@site/src/utils/assert';
 import { Image, Mask } from 'image-js';
-import { produce } from 'immer';
-import { WritableDraft } from 'immer/dist/internal.js';
+import { produce, WritableDraft } from 'immer';
 import { useReducer } from 'react';
 
 import { Addon } from '../../utils/types';

src/pages/index.tsx

@@ -37,7 +37,7 @@ function HomepageHeader() {
   );
 }
 
-export default function Home(): JSX.Element {
+export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout