React text box not taking input

Question

I have a home project that I'm working on in React. I have a very basic component that renders a text box and calls a passed in method. The issue is that when I run the code, I'm not able to type into the text box.

I have tried using value={tempCity} & defaultValue={tempCity} ; as is the fix from other posts, but neither work for me.

My class:

import { Box, Input, InputLabel, Button, FormControl } from "@mui/material";
import React from "react";
import { useState } from "react";

const WeatherCitySearch = ({ city, changeCity }) => {
  const [tempCity, setTempCity] = useState("");

  return (
    <div className="weather-search">
      <h1>{city}</h1>
      <Box component="form">
        <FormControl>
          <InputLabel>City</InputLabel>
          <Input
            type="text"
            id="city-search"
            placeholder={city}
            defaultValue={tempCity}
            onChange={(e) => {
              console.log("TYPING!!! ", e.target.value);
              setTempCity(e.target.value);
            }}
          />
        </FormControl>
        <Button variant="contained" onClick={() => changeCity(tempCity)}>
          Search
        </Button>
      </Box>
    </div>
  );
};
export default WeatherCitySearch;