Build a Wordle Game from Scratch

Problem: Build a Wordle Game from Scratch Build a playable Wordle game using React. Fixed configuration Secret word: SPEND Word length: 5 Maximum number of guesses: 5 Requirements Render a 5-row by 5-column game board. Let the user enter a guess through an input field and submit it with a Guess button (or form submission). Input rules: Only English alphabetic characters are allowed. Convert input to uppercase automatically. Limit input to 5 characters. A guess can be submitted only when it contains exactly 5 characters. Submitted guesses must be rendered on the board. The in-progress, unsubmitted guess must appear in the next available row. After a guess is submitted, color each cell according to the following rules: Green: the letter matches the secret word at the same index. Yellow: the letter exists in the secret word but is at a different index. Red: the letter does not exist in the secret word. If the user submits SPEND, end the game and display You've won!. If the user submits 5 guesses without finding the secret word, end the game and display You've lost!. Once the game is over, hide the input form and prevent further submissions. Examples Submit SHEEP: S at index 0 is green. H is red. E at index 2 is yellow. E at index 3 is yellow. P at index 4 is yellow. Submit SPEND: show the winning message and hide the input form. You may use React function components and Hooks. Focus on component decomposition, state management, input validation, and game-over handling. Example Input Type `sp3e!nd` into the input field. Output The controlled input displays `SPEND` after removing non-letters, converting to uppercase, and limiting the value to 5 characters.