Why isnt my dropdown sending data with my onChange - reactjs

Question

So im trying to make a categories post, the backend part works but it isnt sending any data. i think it's something with my onChange. It works if I do it as a single input and manually type in said category but when I try to do it in a dropdown menu it isnt reading the value i think. My backend has an enum of "grinders" and "trays right now.
This is my front end code
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js">
import React from "react";
import axios from "axios";
import { post } from "../services/service";
const Post = () => {
const [title, setTitle] = React.useState("");
const [content, setContent] = React.useState("");
const [price, setPrice] = React.useState("");
const [postPic, setPostPic] = React.useState("");
const [category, setCategory] = React.useState(""); //THIS IS MY HOOK FOR CATEGORIES
const [status, setStatus] = React.useState("");
const createPost = async (e) => {
e.preventDefault();
if (!title || !category) {
setStatus("Please enter a title and category");
} else {
try {
const response = await post("/posts/create", {
title: title,
content: content,
price: "$" + price,
postPic: postPic,
typeOfCategory: category,
});
console.log("DATA", response.data);
} catch (err) {
console.error(err.message);
}
}
};
const handleFileUpload = async (e) => {
try {
// setLoading(true);
const uploadData = new FormData();
uploadData.append("imageUrl", e.target.files[0]);
let response = await post("/posts/add-picture", uploadData);
setPostPic(response.data.path);
// setLoading(false);
} catch (err) {
console.error(err.message);
// setLoading(false);
setStatus("Image must be .png, .jpeg, or .webp");
}
};
return (
<div className="post-page">
<form className="login-inputs" onSubmit={createPost}>
<h1 className="post-title">Create post</h1>
<input
placeholder="Title..."
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<div className="postpic-img-section">
<img
className="postpic-img"
src={
postPic ||
"https://www.freeiconspng.com/thumbs/no-image-icon/no-image-icon-15.png"
}
alt="Profile Picture"
/>
</div>
<textarea
placeholder="Content..."
type="text"
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<input
className="price-input"
placeholder="$0"
type="number"
value={price}
onChange={(e) => setPrice(e.target.value)}
/>
{/* <input
placeholder="category"
type="text"
value={category}
onChange={(e) => setCategory(e.target.value)}
/> */}
<label htmlFor="file-upload" className="custom-file-upload">
<i className="fa fa-cloud-upload">
<img
src="https://www.freeiconspng.com/thumbs/upload-icon/upload-icon-22.png"
alt="Upload"
height="20"
/>
Custom Upload
</i>
</label>
<input id="file-upload" type="file" onChange={handleFileUpload} />
{/* THIS IS WHERE IM TRYING TO MAKE THE DROPDOWN OF THE CATEGORIES */}
<select value={category} onChange={(e) => setCategory(e.target.value)}>
<option value="grinders">grinders</option>
<option value="trays">Trays</option>
</select>
<button>Submit</button>
<p className="login-status">{status}</p>
</form>
</div>
);
};
export default Post;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

There is nothing wrong with your select handling. I've just copy-pasted your relevant code snippet and it works well.
const App = () => {
const [category, setCategory] = React.useState("")
return (
<div>
<div>typeOfCategory: {category}</div>
<select value={category} onChange={(e) => setCategory(e.target.value)}>
<option value="" disabled>Please select</option>
<option value="grinders">grinders</option>
<option value="trays">Trays</option>
</select>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

Im dumb my token expired and I have a isAuth in my backend