React set multiple states on an event

Question

I have a modal that when it is closed updates a state. The modal also has a div which will be replaced if a button is clicked. The button is replaced with a text area and 2 buttons (one of them a cancel.) If the cancel is clicked, the state updates and the text area hides. All good. However, if the user closes the modal, then the state is not updated and the div is shown next time.
I am unsure of how to set 2 states on close for the modal, I think this could sort this issue. Code has been updated as per @jsNoob suggestion: Hint component has

  const [showModalProblemS_vid, setShowModalProblemS_vid] = useState(false);

<VideoModal showModal={showModalProblemS_vid} closeHandler={() => setShowModalProblemS_vid(false)} videoMessage={props.prob_s_vid} size='med'/>

So how to set a state which is not in the file is the issue

Modal Code below:

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import { useState } from 'react';

function VideoModal({showModal = false, closeHandler = () =>{}, videoMessage, content, size}) {

  const [confused, setConfused] = useState(false)
  
  return (
    <Modal
      size={size}
      show={showModal} 
      onHide={closeHandler}
      onClose={()=> {setConfused(false); closeHandler()}}
      backdrop="static"
      keyboard={false}
    >

    <Modal.Body>
      <video src={videoMessage} controls autoPlay></video> 
      <div>
        {confused ? (
        <div>
          What have you found confusing about this video?
          <textarea className='confusedText' rows="2"></textarea>          
          <Button className="confusedBtnSave">
            Save
          </Button>
          <Button className="confusedBtnCancel" onClick={()=>setConfused(false)}>
            Cancel
          </Button>          
        </div>
        ) : (
        <div>
          <Button className="confusedBtn" onClick={()=>setConfused(true)}>
            Confused?
          </Button>
        </div>
      )}
      </div>
      
    </Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={closeHandler}>
        Close
      </Button>
    </Modal.Footer>
  </Modal>
  )
}

export default VideoModal

Answer 1

Got this working. I had to use the following:

onClick={() => {onClose(); setConfused(false)}}

note the semi-colon between the states

Answer 2

Well to set multiple states you can do that inline

<Button onClick={() => {setState1(foo) setState2(bar)}}></Button

Or you could add them to a function and then call the function inline

function multipleStates(foo, bar){
    setState1(foo)
    setState2(bar)
}

<Button onClick={() => multipleState(foo, bar)}></Button>

I'm not sure if that is too broad of an answer for you, hopefully I haven't misinterpreted your question.