Invalid Hook Call within ReactJS Crash Course for beginners - reactjs

Question

I'm trying to follow along with this youtube video https://youtu.be/tbvguOj8C-o?t=33570
I'm having issue at this point forward in the video until the next code update (Roughly one minute in)
Specifically, the creator is adding these changes which causes an Invalid Hook Call
import RadioButtonUncheckedIcon from '#mui/icons-material/RadioButtonUnchecked';
...
const capture = useCallback(() => {
const imageSrc = webcamRef.current.getScreenshot();
console.log(imageSrc);
}, [webcamRef]);
...
<RadioButtonUncheckedIcon
className='WebcamCapture__button'
onClick={capture}
/>
The full code for the file is here:
import React, {useCallback, useRef} from "react";
import Webcam from "react-webcam";
import RadioButtonUncheckedIcon from '#mui/icons-material/RadioButtonUnchecked';
const videoConstraints = {
width: 250,
height: 400,
facingMode: "user",
};
function WebcamCapture() {
const webcamRef = useRef(null);
const capture = useCallback(() => {
const imageSrc = webcamRef.current.getScreenshot();
console.log(imageSrc);
}, [webcamRef]);
return (
<div className="webcamCapture">
<Webcam
audio={false}
height={videoConstraints.height}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={videoConstraints.width}
videoConstraints={videoConstraints}
/>
<RadioButtonUncheckedIcon
className='WebcamCapture__button'
onClick={capture}
/>
</div>
);
}
export default WebcamCapture;
The WebcamCapture component is used here:
import React from 'react';
import WebcamCapture from './WebcamCapture';
function App() {
return (
<div className="app">
<h1>Test build</h1>
<WebcamCapture />
</div>
);
}
export default App;
The error code displayed in the chrome console is this:
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
This is my best guess for the issue. It's the first issue called that causes declerations to be null. The full error stacktrace can be found here: https://pastebin.com/UKQm9TYi
The package.json looks like this,
{
"name": "snapchat-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#mui/base": "^5.0.0-alpha.91",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.9.2",
"#reduxjs/toolkit": "^1.8.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.3.0",
"react": "^16.8.0",
"react-dom": "16.8.0",
"react-redux": "^8.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
To the best of my knowledge, React and the renderer are matching versions, I haven't violated the Rules of Hooks (most tentative!), and there is only one copy of React running in the app as every other call is dedupped.
I'm very new to React and Node.JS so any feedback or criticisms are welcome. Thank you for your time.

Answer 1

I found the issue to the problem. There was a missing dependency in the package.json that I hadn't noticed until I placed the code into a sandbox.
Specifically, it was
"#mui/icons-material": "5.8.4",