fix: keep inputValue in sync with currentQueueSong

Author: aureliony

src/components/MusicPlayer.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';
 import { ButtonGroup, Button, FormControl } from 'react-bootstrap';
 import { IPlayingState } from '../models/Player';
@@ -23,21 +23,23 @@ export const MusicPlayer: React.FC<IMusicPlayerProps> = (props) => {
     playingState.currentQueueSong + 1
   );
 
+  useEffect(() => {
+    setInputValue(playingState.currentQueueSong + 1);
+  }, [playingState.currentQueueSong]);
+
   useEvent('pausevideo', () => {
     setIsPlaying(false);
   });
 
   const onPreviousQueueSong = () => {
     if (playingState.currentQueueSong < 1) return;
     setCurrentQueueSong(playingState.currentQueueSong - 1);
-    setInputValue(playingState.currentQueueSong);
   };
 
   const onNextQueueSong = () => {
     if (playingState.currentQueueSong === playingState.currentQueue.length - 1)
       return;
     setCurrentQueueSong(playingState.currentQueueSong + 1);
-    setInputValue(playingState.currentQueueSong + 2);
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {