当在React中聚焦输入时，我想更改样式

import React, { useState } from 'react';

function App() {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div>
      <input
        type="text"
        onFocus={handleFocus}
        onBlur={handleBlur}
        className={isFocused ? 'focused' : ''}
      />
    </div>
  );
}

export default App;

.focused {
  border: 2px solid blue;
  outline: none;
}