Problem: For some reasons my submittedSev state does not seem to re-render in the DOM upon calling it's state updating function setSubmittedSev(). However, I can see console logs renders for sev parameter. Why is this happening?

Expected outcome – I expect the popup component to re-render upon calling submittedSev() function. And so for my text stored in data variable to also update.

popup.tsx

const App: React.FC<{}> = () => {
    const [submittedSev, setSubmittedSev] = useState('High');

    const data = [{
            title: 'Title example',
            summary: 'Summary Example',
            body: `${submittedSev}`,
            sevChange: true
     }
    ]

    const selectOptionHandler = (index) => {
     setCurrentOption(data[index]);
    };

    const submittedSevChangeHandler = (sev) => {
        setSubmittedSev(sev); // Not triggering re-render
        console.log(sev) // Correctly logs to the console
    };

    return (
    <div className="App">
        <aside>
            <ResponseList
                onSelectOption={selectOptionHandler}
                responseData={data}
            />
        </aside>
        <main>
            <ResponseDetail
                details={currentOption}
                onChangeSubmittedSevHandler={submittedSevChangeHandler}
            />
        </main>
    </div>
        );
      };

ResponseDetail.tsx - Child component

const ResponseDetail = (props) => {
  
    const submittedSevUpdateChangeHandler = (e) => {        
        props.onChangeSubmittedSevHandler(e.target.value);
    };

    return (
     <select onChange={submittedSevUpdateChangeHandler}>
      <option value="Low">Low</option>
      <option value="Medium">Medium</option>
      <option value="High">High</option>
     </select>
     )
    }