Unordered list to not show bullets

Question

I am using ReactJS, and Styled components, and I get bullets and line wrap on my list. I want to control the list with my flexbox. What's wrong?

const Row1 = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .menu-item {
        background-color: red;
    } 
`;

function Header() {

    return (
        <Page>
            <Row1>
                <ul className="list">
                    <li className="menu-item">Home</li>
                    <li className="menu-item">Services</li>
                    <li className="menu-item">Products</li>
                    <li className="menu-item">Links</li>
                </ul>
             </Row1>
        </Page>
    );
}

I get it in a bullet list. I was expecting to be controlling it with flex-direction.