Firstly your data array is not hooked to any state managing variable. So when you try showing values initially from the data array and then try showing the updated data from the hooks variable when an action is trigged, it is obvious to cause some clash and hence fail to show the updated values. One way to get around this would be, to associate the initial data with a state hook and then update the data array accordingly. It is also important that correct data is updated that corresponds to the action triggered, so here we'd want to make sure that each object of the collection is unique, this could be accomplished by assigning an id attribute on each object. Further up, we can find out the object on which the action was taken on, mutate the property value and then re-construct the array using the state hook function to re-render with the correct updated value(s). Kindly refer to the below code and read the comments to get a clearer idea.

import React, { useState } from "react";
const App = () => {
  const [data, setData] = useState([
    { id: Math.random(), TITLE: "Festival", PRIORITY: 3, STEP: 1 },
    { id: Math.random(), TITLE: "Headphone", PRIORITY: 2, STEP: 2 },
    { id: Math.random(), TITLE: "Mountain", PRIORITY: 1, STEP: 1 }
  ]); //id attribute is added to each object to make sure every object in the array is unique.

  const priorityChange = (e, id) => {
   //This function should accept event and id arguments, to identify and update 
   //values correctly.
    const index = data.findIndex((item) => item.id === id); //find the index of the object (item) whose priority needs to be updated.
    const arr = [...data]; //Copy original array data to constant arr.

    arr[index].PRIORITY = e.target.value; //mutate the PRIORITY property's value

    setData([...arr]); //Set data to the new array with updated value.

    
  };

  const valueChange = (e,id) => {
    //This function should accept event and id arguments, to identify and update 
   //values correctly.
    const index = data.findIndex((item) => item.id === id); //find the index of the object (item) whose priority needs to be updated.
    const arr = [...data];

    arr[index].STEP = e.target.value; //mutate the STEP property's value

    setData([...arr]); //Set data to the new array with updated value.
  };
  return (
    <>
      {data.map((info) => (
        <div key={Math.random()}>
          <div>{info.TITLE}</div>

          <select
            value={info.PRIORITY}
            onChange={(e) => {
              priorityChange(e, info.id); //pass event object and id corresponding to each array object.
            }}
          >
            <option value={1}> 1 </option>
            <option value={2}> 2 </option>
            <option value={3}> 3 </option>
          </select>

          <select
            value={info.STEP}
            onChange={(e) => {
              valueChange(e, info.id); //pass event object and id corresponding to each array object.
            }}
          >
            <option value={1}> 1 </option>
            <option value={2}> 2 </option>
            <option value={3}> 3 </option>
          </select>
        </div>
      ))}
    </>
  );
};

export default App;