I am designing a random bug generator.I have two buttons in this code,”Generate Faulty Code” that replaces some symbol within code to other symbol and “Find faulty code” which shows the replaced symbol on clicking it.But here findSymbol() function is not working properly causing ‘Find Faulty code’ to generate the blank output.It is not showing anyoutput at all

import { Box, Button } from "@chakra-ui/react";
import React, { useRef, useState } from "react";
import Editor from "@monaco-editor/react";

const CodeEditor = () => {
  const editorRef = useRef();
  const [value, setValue] = useState("");
  const [output, setOutput] = useState("");
  const [showOutput, setShowOutput] = useState(false);
  const [replaceBtnDisabled, setReplaceBtnDisabled] = useState(false);
  const[findBtnDisabled , setfindBtnDisabled  ]  = useState(true)

  let outputDetails = ""; // String to hold replacement details
  const replaceSymbols = () => {
    const code = value;
    const lines = code.split("n");
    let newCode = ""; // Initialize variable to hold modified code
    let replacementCount = 0; // Counter for replaced symbols
    let outputDetails = ""; // String to hold replacement details, reset for each button click
  
    // Calculate total number of characters in the input
    const totalChars = code.length;
  
    // Calculate replacement probability based on the length of the input
    const replaceProbability = 0.001 * (totalChars / 1000); // Adjust the scaling factor as needed
  
    // Iterate through each line
    for (let i = 0; i < lines.length; i++) {
      let line = lines[i];
  
      // Iterate through each symbol in the line
      for (let j = 0; j < line.length; j++) {
        // Randomly choose symbols to replace
        const replaceChance = Math.random(); // Random number between 0 and 1
  
        if (replaceChance < replaceProbability && replacementCount < 4) {
          const originalSymbol = line.charAt(j);
          const replacedSymbol = generateRandomSymbol(); // Function to generate random symbol
  
          // Replace symbol
          const lineArray = line.split("");
          lineArray[j] = replacedSymbol;
          line = lineArray.join("");
  
          // Append replacement details
          outputDetails += `Line no: ${i + 1}, Place: ${j + 1}, Original Symbol: ${originalSymbol}, Replaced Symbol: ${replacedSymbol}n`;
          
          replacementCount++; // Increment replacement counter
        }
      }
  
      newCode += line + "n"; // Append the modified line to newCode
    }
  
    // Update the textarea with the modified code
    setValue(newCode);
  
    // Enable the Show Output button and disable the Replace Symbol button
    setShowOutput(true);
    setReplaceBtnDisabled(true);
    setfindBtnDisabled(false);
  };
  

  function findSymbol(){
    // Update output details
    setOutput(outputDetails);
  }

  const generateRandomSymbol = () => {
    const symbols = "!@#$%^&*( )_+-=[]{}|;:,.< >?";
    const randomIndex = Math.floor(Math.random() * symbols.length);
    return symbols.charAt(randomIndex);
  };

  return (
    <>
      <Box>
        <Editor
          height="75vh"
          defaultLanguage="javascript"
          defaultValue="// some comment"
          theme="vs-dark"
          ref={editorRef}
          value={value}
          onChange={(value) => setValue(value)}
        />
        <Button onClick={replaceSymbols} isDisabled={replaceBtnDisabled}>
          Generate Faulty Code
        </Button>
        <Button onClick={findSymbol} isDisabled={findBtnDisabled}>
          Find Faulty Code
        </Button>
        {showOutput && (
          <Box id="output" style={{ whiteSpace: "pre-wrap" }}>
            {output}
          </Box>
        )}
      </Box>
    </>
  );
};

export default CodeEditor;

Onclicking ” Find Faulty Code” button,the outputdetails has to be displayed.It is not displaying anything