debounce

  const [text, setText] = useState('');

  useEffect(() => {
    const timerID = setTimeout(() => {
      console.log('EFFECT:', text)
    }, 500);
    return () => {
      clearTimeout(timerID)
    }
  }, [text])

  return (
    <Container maxWidth='sm' sx={{ color: 'white' }}>
      <TextField onChange={(e) => setText(e.target.value)} value={text} sx={{ bgcolor: 'white' }} />
    </Container>
  );