I am currently in the process of developing a fitness app that includes a timer. I have chosen to use MUI for this project. However, I've encountered an issue that is causing my app to break. Whenever I incorporate the Paper components or any Item based on Paper, the app keeps reloading or rerendering. This becomes problematic when trying to input values into a TextArea as it loses focus due to the constant reloading.
import { React, useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
import { Button, Fab } from "@mui/material";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Stack from "@mui/material/Stack";
import PauseIcon from "@mui/icons-material/Pause";
import PlayIcon from "@mui/icons-material/PlayArrow";
// And so on...