はじめに

まだまだ不完全なコードですので、参考にはならないと思います。
「こうしたらできる」などのコメントお待ちしています。
よろしくお願いいたします。

コメントにて
@honey32 さんからわかりやすい説明付きでコードを頂いていますので、
困っている方はそちらを参考にしてください！

やりたいこと

ダイアログに入力した文字を画面に表示したい。
最後に入力してから2秒後にダイアログを閉じ、その時点の文字列を画面に表示したい。

課題

・画面に文字列が表示されない
・想定している秒数で画面が閉じない

コード

App.tsx

import * as React from 'react';
import Button from '@mui/material/Button';
import DialogTitle from '@mui/material/DialogTitle';
import Dialog from '@mui/material/Dialog';
import Typography from '@mui/material/Typography';
import { DialogContent, TextField } from '@mui/material';
import { useState } from 'react';

export interface SimpleDialogProps {
  open: boolean;
  value: string;
  onClose: (value: string) => void;
}

function SimpleDialog(props: SimpleDialogProps) {
  const { onClose, value, open } = props
  const [input, setInput] = useState<string>('')
  let count: number = 0

  const handleClose = () => {
    onClose(value);
  };

  const timer = () => {
    const countUp = () => {
      count++
    }
    const intervalId = setInterval(() => {
      countUp()
      if (count > 2) {
        clearInterval(intervalId)
        setTimeout(() => {
          setInput(props.value)
          console.log('input:' + input)
          handleClose()
        }, 100)
      }
    }, 1000)

  }
  const getInput = (e: any) => {
    setInput(prev => prev + e.key)
    timer()
  }

  return (
    <Dialog onClose={handleClose} open={open}>
      <DialogTitle>Input here</DialogTitle>
      <DialogContent>
        <TextField
          value={input}
          onKeyDown={getInput}
        />
      </DialogContent>
    </Dialog>
  );
}

export default function SimpleDialogDemo() {
  const [open, setOpen] = useState<boolean>(false)
  const [value, setValue] = useState<string>('')

  const handleClickOpen = () => {
    setOpen(true)
  }

  const handleClose = (value: string) => {
    setOpen(false)
  }

  return (
    <div>
      <Typography>inputValue:{value}</Typography>
      <Button variant="outlined" onClick={handleClickOpen}>
        Open Dialog
      </Button>
      <SimpleDialog
        value={value}
        open={open}
        onClose={handleClose}
      />
    </div>
  );
}