Html – The tags keep on piling up vertically, I want to make it pile up horizontally

When I click the plus button, the text just piles up vertically, how do I make them in a straight line.
I think the problem has to do with this part of the code

    const tagsContainerStyle = {
        display: 'flex',
        flexDirection: 'row', // Display tags horizontally
        alignItems: 'center',
        flexWrap: 'wrap', // Allow tags to wrap to the next line
        marginTop: '10px',
        marginBottom: '10px', // Add marginBottom to create space between rows
    };

    const tagStyle = {
        marginRight: '5px',
        marginBottom: '5px', // Add margin at the bottom to create space between rows
        backgroundColor: '#eee',
        padding: '5px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center', // Align text and remove button vertically
    };

But here is the full code just in case,

import React, { useState } from 'react';

const App = () => {
    const [tags, setTags] = useState([]);
    const [currentTag, setCurrentTag] = useState('');

    const handleTagChange = (event) => {
        setCurrentTag(event.target.value);
    };

    const handleAddTag = () => {
        if (currentTag.trim() !== '') {
            setTags([...tags, currentTag.trim()]);
            setCurrentTag('');
        }
    };

    const handleRemoveTag = (index) => {
        const updatedTags = [...tags];
        updatedTags.splice(index, 1);
        setTags(updatedTags);
    };

    const handleEnterPress = (event) => {
        if (event.key === 'Enter') {
            handleAddTag();
        }
    };

    const containerStyle = {
        display: 'flex',
        height: '100vh', // Adjust the height as needed
    };

    const leftContainerStyle = {
        flex: 1,
        backgroundColor: 'black',
        borderTopLeftRadius: '15px',
        borderBottomLeftRadius: '15px',
        position: 'relative',
        padding: '20px',
    };

    const friendsListStyle = {
        position: 'absolute',
        top: '5%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        color: 'white',
        fontSize: '25px',
        fontFamily: 'Arial, sans-serif',
    };

    const rightContainerStyle = {
        flex: 4,
        backgroundColor: 'white',
        borderTopRightRadius: '15px',
        borderBottomRightRadius: '15px',
        padding: '20px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'black',
        fontFamily: 'Arial, sans-serif',
    };

    const buttonStyle = {
        padding: '10px 20px',
        fontSize: '16px',
        color: 'white',
        backgroundColor: 'black',
        border: 'none',
        borderRadius: '8px',
        cursor: 'pointer',
        fontFamily: 'Arial, sans-serif',
        marginTop: '10px', // Adjust the marginTop for downward space
    };

    const inputStyle = {
        marginTop: '0px',
        padding: '8px',
        fontSize: '14px',
        borderRadius: '4px',
        border: '1px solid #ccc',
        marginRight: '10px',
        height: '20px', // Adjust the height as needed
    };


    const plusContainerStyle = {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        marginBottom: '10px', // Adjust the marginBottom for downward space
    };


    const tagsContainerStyle = {
        display: 'flex',
        flexDirection: 'row', // Display tags horizontally
        alignItems: 'center',
        flexWrap: 'wrap', // Allow tags to wrap to the next line
        marginTop: '10px',
        marginBottom: '10px', // Add marginBottom to create space between rows
    };

    const tagStyle = {
        marginRight: '5px',
        marginBottom: '5px', // Add margin at the bottom to create space between rows
        backgroundColor: '#eee',
        padding: '5px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center', // Align text and remove button vertically
    };

    const removeTagButtonStyle = {
        marginLeft: '5px',
        cursor: 'pointer',
    };

    return (
        <div style={containerStyle}>
            <div style={leftContainerStyle}>
                {/* Content for the left container */}
                <div style={friendsListStyle}>Friends List</div>
                <h1 style={{ fontFamily: 'Arial, sans-serif' }}>Left Container</h1>
            </div>
            <div style={rightContainerStyle}>
                {/* Content for the right container */}
                <h1 style={{ fontFamily: 'Arial, sans-serif' }}>Search for a person</h1>
                <div style={tagsContainerStyle}>
                    <input
                        type="text"
                        placeholder="Enter tags..."
                        style={inputStyle}
                        value={currentTag}
                        onChange={handleTagChange}
                        onKeyPress={handleEnterPress}
                    />
                    <div style={plusContainerStyle}>
                        <button style={buttonStyle} onClick={handleAddTag}>
                            +
                        </button>
                    </div>
                </div>
                <div>
                    {tags.map((tag, index) => (
                        <div key={index} style={tagStyle}>
                            {tag}
                            <span
                                style={removeTagButtonStyle}
                                onClick={() => handleRemoveTag(index)}
                            >
                                X
                            </span>
                        </div>
                    ))}
                </div>
                <button style={buttonStyle}>Search</button>
            </div>
        </div>
    );
};

export default App;

This is what it looks like