Почему не обновляется defaultValue?

Не обновляется defaultValue у input.

Как можно обновить значение по умолчанию?

import React, {useEffect, useState} from 'react';

const DifficultyComponent = () => {

    const DifficultyGetServer = () => {
        fetch('/getDifficulty').then(response => response.json()).then(data => {
                console.log(data);
                setDifficulty(data['difficulty'])
            }
        );
    }

    const [maxNumber, setMaxNumber] = useState(5);
    const [difficulty, setDifficulty] = useState(0);

    useEffect(() => {
        DifficultyGetServer();
    }, []);

    return (
        <div className="form-group">
            <label htmlFor="difficulty">Сложность игры (Максимальное число: {maxNumber})</label>
            <input type="number" className="form-control" id="difficulty" min="1" defaultValue={difficulty} onChange={(e) => setMaxNumber(e.target.value * 5)}/>
        </div>
    );
};

export default DifficultyComponent;

Ответы (0 шт):