i am trying to create a job posting form using react , mui , formik and yup in which i am creating a tag input field same as stackoverflow have but when i am setting the value of tag after adding new tag using setTags then it is adding the second last tag not the last.

   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.