How to send an array from a react Frontend to a mongo DB BackEnd

I have been building a recipe app (both front and back end). My issue is with the data structure and how to maintain it.

My recipe schema has a few properties that have an array of objects as values. On Postman, I am able to successfully maintain this structure by sending it like this {"categoryTags":["easy", "breakfast"]} and this creates a structure that looks like This: categoryTags: 0:"easy", 1:"breakfast"... This is great for mapping later on my frontend. The Information when retrieved on the frontend arrives like this: easy,breakfast and when edited and pushed to the db... it looks like this: categoryTags:0:"easy,breakfast". I don't know how to maintain the structure from the FE to the BE. Is this possible?

This is My React Code:

const EditRecipeModal = ({ recipe }) => {
const oneRecipe = useSelector((state) => state.user.singleRecipe);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchSingleRecipe(recipe._id));
}, []);
const [tags, setTags] = useState([recipe.categoryTags]);
const [title, setTitle] = useState(recipe.title);
const [description, setDescription] = useState(recipe.description);
const [ingredients, setIngredients] = useState(recipe.ingredients);
const [instructions, setInstructions] = useState(recipe.instructions);
const editedModal = {
categoryTags: tags,
title: title,
description: description,
ingredients: ingredients,
instructions: instructions,
};
const onSubmitHandler = (e) => {
e.preventDefault();
dispatch(editRecipe(editedModal, `${recipe._id}`));
};
return (
<div id="editRecipeModal">
<h1>Edit {recipe.title}</h1>
<div>
<form onSubmit={onSubmitHandler}>
<label className="fw-bold">Category</label>
<input
onChange={(e) => setTags(e.target.value)}
value={tags}
type="text"
placeholder={recipe.categoryTags}
/>
<Form.Group className="mb-3">
<Form.Label className="fw-bold">Title</Form.Label>
<Form.Control
value={title}
onChange={(e) => setTitle(e.target.value)}
type="text"
placeholder="ingredients"
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label className="fw-bold">Ingredients</Form.Label>
<Form.Control
value={ingredients}
onChange={(e) => setIngredients(e.target.value)}
type="text"
placeholder="ingredients"
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label className="fw-bold">Instructions</Form.Label>
<Form.Control
value={instructions}
onChange={(e) => setInstructions(e.target.value)}
type="text"
placeholder="instructions"
/>
</Form.Group>
<Button
className="login-80p mb-4 fw-bold"
variant="success"
type="submit"
>
Edit
</Button>
</form>
</div>
<Button variant="danger">Delete</Button>
</div>
);
};
export default EditRecipeModal;

This is my BE Schema:

const recipeSchema = new Schema({
categoryTags: [{ type: String, required: true }],
title: { type: String, required: true },
photo: {
type: String,
required: false,
default: "https://cdn-icons-png.flaticon.com/512/135/135161.png",
},
description: { type: String, required: false },
ingredients: [{ type: String, required: false }],
instructions: [{ type: String, required: false }],
author: { type: Schema.Types.ObjectId, ref: "User", required: true },
});
export default model("Recipe", recipeSchema);

you can define the categoryTags in the BE schema as array type { type: Array, required: true }