Update a with react

I have a tag select that could be selected but i do have a next and previous buttons that should update the option.

I tried to do that using sort() every time the buttons are clicked but when I select the option and then use the next button, the select does not update anymore.

How can I update the select option dynamically with a state and make this work?

component Select

export default function RegistroNavSelect(props) {

      const atualizarLista = (e) => {
        props.setPeriodo(e.target.value)
      }
      return (
          <select id="periodoSelec" className="registro__nav--select" name="select" onChange={e => atualizarLista(e)}>
            {props.lista?.map((periodo, index) => {
              return (<option key={index} value={periodo}>{periodo}</option>)
            })}
          </select>
        );
    }

component navigate

export default function RegistrosNav(props) {
  const periodos = props.lista
  const index = props.lista.indexOf(props.periodo)

  const setNav = (direcao) => {
    if(direcao){
      props.setPeriodo(periodos[index-1])
    }
    if(!direcao){
      props.setPeriodo(periodos[index+1])
    }
  }
  return <>
    <div className="registro__nav">
    <FontAwesomeIcon onClick={e => setNav(false)} className="registro__nav--icon" icon={faChevronLeft}/>
    <div>
      Período
      <RegistroNavSelect periodo={props.periodo} lista={props.lista} setPeriodo={props.setPeriodo}/>
     </div>
     <FontAwesomeIcon onClick={e => setNav(true)} className="registro__nav--icon" icon={faChevronRight}/>
    </div>
  </>;