Q: React Material UI TextField wiped when using setter from useState Note: Full code is at the bottom.
I'm having a problem using a MUI TextField. I want the enter keypress to navigate to another page, and any other keypresses to be added to the TextField (as is quite common). The enter keypress works nicely. However, the below code wipes the text in the search bar after every character.
What am I doing wrong?
More specifically:

*

*When I try using onChange, entered text is displayed in the search bar but it cannot handle the enter key press

*onKeyPress similarly updates what text is displayed in the search bar, unless I try to update the search variable, in which case all entered text vanishes.

import {useState} from 'react';
import './App.css';
import Input from '@mui/material/Input';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import SearchIcon from '@mui/icons-material/Search';
import ImageSearch from '@mui/icons-material/ImageSearch';
import Brush from '@mui/icons-material/Brush';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import {styled} from "@mui/material";
import { shadows } from '@mui/system';
import {useNavigate} from "react-router-dom";

function App() {
    const navigate = useNavigate()

    // useState always returns 2 vars, the variable you care about and its setter
    const [search, setSearch] = useState('');

    // https://github.com/mui/material-ui/issues/13570#issuecomment-541008474
    // Why is styled necessary? CSS runs on a specifity, can add class to text field.
    // styled uses camelCase
    const SearchBox = styled(TextField)(() => ({ // This 2nd brace is probably specify the return
    '& fieldSet': {
        borderRadius: '40px',
    },
    }));

    const generate = () => {
        navigate(`/generate?text=${search}`)
    }

  const handleKeyPress = (event) => {
        if (event.charCode === 13) { // enter key
            event.preventDefault();
            generate();
        } else {
            setSearch(event.target.value)
        }
  }

  return (
    <div className="App" style={{textAlign: "center"}}>
      <header className="App-header">
        <Container maxWidth="md">
          <Box
                component="img"
                sx={{
                    height: 233,
                    width: 450,
                    maxHeight: { xs: 233, md: 167 },
                    maxWidth: { xs: 350, md: 250 },
                }}
                src="https://flxt.tmsimg.com/assets/p17334712_b_h9_aa.jpg"
          />
          <SearchBox
              fullWidth
              title={"Describe your creation"}
              id="input-with-icon-textfield"
              // sx={{boxShadow: 3}}
              // label="TextField"
              onKeyPress={handleKeyPress}
              InputProps={{
                  startAdornment: (
                      <InputAdornment position="start">
                          <SearchIcon />
                      </InputAdornment>
                  ),
                  endAdornment: (
                      <InputAdornment position="end">
                          <Brush
                              onClick={generate}
                              color="primary"
                          />
                          {/*<ImageSearch*/}
                          {/*    color="primary"*/}
                          {/*/>*/}
                      </InputAdornment>
                  ),
              }}
              variant="outlined"
          />
          </Container>
      </header>
    </div>
  );
}

export default App


Edit:
The following works correctly except for one problem: each keypress removes focus from the text bar.
import {useState} from 'react';
import './App.css';
import Input from '@mui/material/Input';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import SearchIcon from '@mui/icons-material/Search';
import ImageSearch from '@mui/icons-material/ImageSearch';
import Brush from '@mui/icons-material/Brush';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import {styled} from "@mui/material";
import { shadows } from '@mui/system';
import {useNavigate} from "react-router-dom";

function App() {
    const navigate = useNavigate()

    // useState always returns 2 vars, the variable you care about and its setter
    const [search, setSearch] = useState('');

    // https://github.com/mui/material-ui/issues/13570#issuecomment-541008474
    // Why is styled necessary? CSS runs on a specifity, can add class to text field.
    // styled uses camelCase
    const SearchBox = styled(TextField)(() => ({ // This 2nd brace is probably specify the return
    '& fieldSet': {
        borderRadius: '40px',
    },
    }));

    const generate = () => {
        navigate(`/generate?text=${search}`)
    }

  const handleKeyPress = (event) => {
        if (event.charCode === 13) { // enter key
            event.preventDefault();
            generate();
        } else {
            // setSearch(event.target.value)
            // setSearch(search + event.target.value )
            // setSearch(search + event.key )
            // // setSearch((prevSearch) => { return (prevSearch + event.target.value)})
            // console.log(event.target.value);
            // console.log(search);
        }
  }

    const handleChange = (event) => {
        setSearch(event.target.value);
    }

  return (
    <div className="App" style={{textAlign: "center"}}>
      <header className="App-header">
        <Container maxWidth="md">
          <Box
                component="img"
                sx={{
                    height: 233,
                    width: 450,
                    maxHeight: { xs: 233, md: 167 },
                    maxWidth: { xs: 350, md: 250 },
                }}
                src="https://flxt.tmsimg.com/assets/p17334712_b_h9_aa.jpg"
          />
          <SearchBox
              fullWidth
              title={"Describe your creation"}
              id="input-with-icon-textfield"
              value={search}
              // onChange={handleChange}
              // sx={{boxShadow: 3}}
              // label="TextField"
              // onKeyPress={handleKeyPress}
              InputProps={{
                  onChange: handleChange,
                  onKeyPress: handleKeyPress,
                  startAdornment: (
                      <InputAdornment position="start">
                          <SearchIcon />
                      </InputAdornment>
                  ),
                  endAdornment: (
                      <InputAdornment position="end">
                          <Brush
                              onClick={generate}
                              color="primary"
                          />
                          {/*<ImageSearch*/}
                          {/*    color="primary"*/}
                          {/*/>*/}
                      </InputAdornment>
                  ),
              }}
              variant="outlined"
          />
          </Container>
      </header>
    </div>
  );
}

export default App


