Input elements within popup window do not respond to user input – Reactjs

I have a pop up window with two input elements that do not respond to user input. In the past, I’ve had input elements with a very similar setup that respond to user input just fine. I’m not sure if this is caused by there being a delay with the asynchronous nature of useState or if I have overlooked something with my setup trying to make this pop up window. I appreciate you’re time and help. Thank you!

Update: I have made a mock input element outside of the pop up window using the same set up for the Onchange and the value properties and it responds to user input. This makes me believe that useState is not the issue here.

Definition:

 function Popup({ onClose, onSave }) {
    const [frequency, setFrequency] = useState("");
    const [focus, setFocus] = useState("");

    function handleFrequencyChange(event) {
      setFrequency(event.target.value);
    }

    function handleFocusChange(event) {
      setFocus(event.target.value);
    }
    return (
          <h3>Journal Goals</h3>
          <label style={{ display: "block", marginBottom: "10px" }}>
            Frequency:
            <input type="text" style={{ marginLeft: "10px" }} onChange={handleFrequencyChange}
             value={frequency}
            />
          </label>
          <label style={{ display: "block", marginBottom: "10px", marginLeft: "32px" }}>
            Focus:
            <input type="text" style={{ marginLeft: "10px" }} onChange={handleFocusChange} value={focus} />
          </label>
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <button
              onMouseEnter={adjacentHandleMouseEnter}
              onMouseLeave={adjacentHandleMouseLeave}
             onClick={handleSave}>Save</button>
            <button
              onMouseEnter={adjacentHandleMouseEnter2}
              onMouseLeave={adjacentHandleMouseLeave2}
              onClick={closePopup}>Cancel</button>
      </div>
    );
  }
  const [showPopup, setShowPopup] = useState(false);

  function openPopup() {
    setShowPopup(true);
  }

  function closePopup() {
    setShowPopup(false);
  }

  function handleSave(data) {
    console.log(data);
    closePopup();
  }

Utilization:

 <button
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          onClick={openPopup}>Goals</button>
   {showPopup && (
          <Popup onClose={closePopup} onSave={handleSave} />
        )}

handleSave — console.log(data):
SyntheticBaseEvent {_reactName: ‘onClick’, _targetInst: null, type: ‘click’, nativeEvent: PointerEvent, target: button, …}