Here is the problem: I have this horizontal scroll component that works fine with all the other static components, but once I add a component which loads the camera and a library called Mediapipe, it glitches when I scroll. As you can see in the video the Test component is alright, but when it comes to the CameraQuestions it glitches. Video. Thanks :)

import React, { useState } from "react";
import CameraQuestions from "../components/quiz/CameraQuestions.jsx";
import Test from "../components/quiz/Test.jsx";
import ScrollSection from "../components/quiz/ScrollSection.jsx";
import "../styles/quiz.css";

function Quiz() {
  const [result, setResult] = useState({}); // Initialize as an empty object

  const handleFinalResults = (newScores) => {
    // Merge new scores with the existing ones
    setResult((prevResult) => {
      const updatedResult = { ...prevResult };
      Object.keys(newScores).forEach((key) => {
        updatedResult[key] = (prevResult[key] || 0) + newScores[key];
      });
      console.log("Result received in parent:", updatedResult);
      return updatedResult;
    });
  };

  return (
    <>
      <CameraQuestions onCalculateFinalResults={handleFinalResults} />
      <Test onCalculateFinalResults={handleFinalResults} />
      {Object.keys(result).length > 0 && (
        <div>
          <h2>Parent Results:</h2>
          <pre>{JSON.stringify(result, null, 2)}</pre>
        </div>
      )}
      <ScrollSection />
    </>
  );
}

export default Quiz;

I tried adding the horizontal scroll component to the beginning of the page, but didn't work.