Tengo una etiqueta de select con tres opciones. Establecí un valor predeterminado usando state. Pero cuando la página se carga, el valor predeterminado no se muestra. Está mostrando la primera opción. Mi consola no muestra ningún error o pista para que pueda resolver el problema.

Aquí está mi código.

 import React, { useState } from 'react'; import Card from '../card/Card'; import ExpenseFilter from '../expense-filter/ExpenseFilter'; import ExpenseItem from '../expense-item/ExpenseItem'; import './Expenses.css'; const Expenses = props => { const [value, setValue] = useState('2022'); const { items } = props; const selectHandler = event => { setValue(event.target.value); }; return ( <Card className="expenses"> <ExpenseFilter value={value} selectHandler={selectHandler} /> {items.map(expense => ( <ExpenseItem key={expense.id} date={expense.date} title={expense.title} amount={expense.amount} /> ))} </Card> ); }; export default Expenses;

 import React from 'react'; const ExpenseFilter = props => { return ( <div className="my-3"> <select value={props.value} onChange={props.selectHandler} className="form-select" aria-label="Default select example"> <option value="1">2020</option> <option value="2">2021</option> <option value="3">2022</option> </select> </div> ); }; export default ExpenseFilter;

¿Cómo puedo resolver el problema? Quiero obtener el valor predeterminado cuando se carga la página.