I am using typescript , material ui and react.
Below is my code. Somehow typescript is showing me error. I could not figure it out why. The code works properly when run its just shows errors.

“react”: “^18.3.1”,
“@mui/lab”: “^5.0.0-alpha.170”,
“@mui/material”: “^5.15.18”,
“typescript”: “^5.2.2”,

import React, { useState } from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Popover from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
import { alpha } from "@mui/material/styles";

const SimplePopover = React.memo(() => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(document.body);
  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;
  let details = "Your browser is blocking the app's popup windows. Please enable popups and then try again.n";
  details += "You can do this by clicking the icon to the right of your web address bar,";
  details += 'selecting the "Always allow..." option, then clicking done and refreshing the page.';

  return (
    <Box>
      <Popover id={id} open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: "center", horizontal: "center" }} transformOrigin={{ vertical: "center", horizontal: "center" }}>
        <Typography component="div" sx={{ p: 2 }}>
          <h2 style={{ color: "#0747a6" }}> Please disable popup blocking </h2>
          <div style={{ whiteSpace: "pre-line" }}> {details} </div>
          <img src="images/popups-blocked.png" alt={details} style={{ paddingTop: "10px", paddingBottom: "10px" }} />
          <Box sx={{ display: "flex", justifyContent: "flex-end", paddingTop: "10px", paddingBottom: "10px", borderTop: 1, borderColor: alpha("#0747a6", 0.1) }}>
            <Button variant="contained" onClick={handleClose} sx={{ mr: 1, color: "#fff", backgroundColor: "#0747a6" }}>
              OK, got it
            </Button>
          </Box>
        </Typography>
      </Popover>
    </Box>
  );
});

export default SimplePopover;

[THE ERROR image in vs code ] https://i.sstatic.net/4afSoEkL.png