pタグなのに縦に並んでしまう

propsとして渡された物(users)をmapで回して一つ一つLabelコンポーネントのなかに入れて表示させています。
Labelコンポーネントはpタグなのですがなぜかusersで回したuserが横並びで表示されず縦に表示されてしまいます。
原因わからず、、、
わかる人いましたらご教授お願いしたいです。

追記
開発環境は以下になります
・react next.js typescript styled-componentys

import { Text } from "components/atoms/Text";
import React, { FunctionComponent } from "react";
import styled from "styled-components";

type User ={
 user: any;
}

export const User: FunctionComponent<Props> = ({
user
}) => {
  return (
    <>
     {users.map((user, i) => (
        <Label key={i}>{user}</Label>
      ))}
    </>
  );
};

import React, { FunctionComponent } from "react";
import styled from "styled-components";

const　Div = styled.p<{
  weight: number;
  size: number;
  color: string;
}>`
  margin: 0;
  font-weight: ${(props) => props.weight};
  font-size: ${(props) => props.size}px;
  color: ${(props) => props.color};
`;

Div.defaultProps = {
  weight: 400,
  size: 12,
};

type Props = {
  weight?: number;
  size?: number;
  color?: string;
  className?: string;
};

export const Text: FunctionComponent<Props> = ({
  weight,
  size,
  color,
  children,
  className,
}) => {
  return (
    <Div
     weight={weight}
      size={size}
      color={color}
      className={className}
    >
      {children}
    </Div>
  );
};