estoy tratando de crear un formulario de publicación de trabajo usando react , mui , formik y sí en el que estoy creando un campo de entrada de etiqueta igual que el de stackoverflow pero cuando estoy configurando el valor de la etiqueta después de agregar una nueva etiqueta usando setTags entonces está agregando el segunda última etiqueta no la última.

 import { TextField } from '@material-ui/core'; import "../../App.css"; const TagsInput = props => { const [tags, setTags] = React.useState(props.tags); const removeTags = indexToRemove => { setTags([...tags.filter((_, index) => index !== indexToRemove)]); }; const addTags = (event,tags) => { if (event.target.value !== "") { setTags([...tags, event.target.value]); props.selectedTags([...tags, event.target.value]); props.setFieldValue('tag',tags) event.target.value = ""; } }; return ( <div className="tags-input"> <ul id="tags"> {tags.map((tag, index) => ( <li key={index} className="tag"> <span className='tag-title'>{tag}</span> <span className='tag-close-icon' onClick={() => removeTags(index)} > x </span> </li> ))} </ul> <TextField type="text" onKeyUp={event => event.key === "Enter" ? addTags(event,tags) : null} placeholder="Add tags" /> </div> ); }; export default TagsInput``` Props which i have passed props = <selectedTags={selectedTags} setFieldValue={setFieldValue} tags={[]}> Example: like if i enter *html* as first tag then it sets *[]* as value of tag if i enter *css* as sencond tag then it sets *['html']* as value of tag if i enter *js* as third tag then it sets *['html','css']* as value of tag Plese help me out how can i fix this bug.