Trying to return a different color div after selecting option in form submit using React and Typescript

I am working on a to do list using React and Typescript. I am trying to return a different colored div when selecting a priority in the option select dropdown (prioritySelect). I have tucked in a function within the ToDoItem JSX Element. What I want to happen is for the prioritySelect component to change the background color of the div it is in “to-do-item” to signify importance.

I tried to add handleOptionsChange function and call it within the div return at the bottom but I keep running into errors when trying to add handleOptionsChange, I am not sure why.

//TODOITEM TO RETURN TO DO COMPONENT

`function ToDoItem(props: { toDo: ToDo; onDeleteToDo: any; prioritySelect: any;}) {`

///TRYING TO CREATE FUNCTION EXPRESSION THAT CALLS EVENT SET STATE FOR PRIORITY BELOW

`handleOptionsChange:any; setState:any;}) {
  handleOptionsChange = (event: any) => {
    props.setState({
      option: event.target.value
    });
  }`



`return (
    <div className="to-do-item" id="to-do-item">
      <div className="checkbox-title-container">
        <div className="check-title-div">
        {Checkbox()}
        <h2 className="to-do-title">{props.toDo.title}</h2>
        </div>
        <div id="delete-div">`

//PRIORITY OPTION SELECT BELOW

    `<select name="Priority" className="select-field" value={props.prioritySelect.option} onChange={props.handleOptionsChange}>
          <option className="important" value='1'>Important</option>
          <option selected value='2'>Normal</option>
          </select>
      <button id="delete" onClick={props.onDeleteToDo}>
        Delete
      </button>
    </div>
  </div>
  <div className="description-box">
    <span className="description">{props.toDo.description}</span>
  </div>
  <br />
  <span className="to-do-date">
    {/* {props.toDo.duedate.toLocaleDateString()} */}
  </span>
</div>

);
}`

I am trying to call handleOptionsChange when returning a JSX component below, I have taken out the rest of the components within the to-do-item div for the sake of readability

  `<div className="to-do-item" id="to-do-item">
  {prioritySelect={handleOptionsChange}} </div>
  <div>`