This component will get input from user and then add it into a select option. I used index as a key :

const NewGroup = () => {
    const [group, setGroup] = useState([]);
    const [category, setcategory] = useState("");
    const addToGroup = () => {
      let temp = [...group, category];
      setGroup(temp);
    };
    return (
      <div>
        <input type="text" name="" id="" value={category} onChange={(e) => { setcategory(e.target.value); }} />
        <button onClick={addToGroup}>submit</button>
        <div>
          <select name="" id="">
            {group.map((category, index) => {
              return (
                <option key={index} value="">
                  {category}
                </option>
              );
            })}
          </select>
        </div>
      </div>
    );
  }
  
  export default NewGroup;

But I want to give each new category a unique ID. How can I do that ?