My Antd Input with addonbefore prop has styling issues

I am trying to create an input using antd. If i remove the addonBefore prop, the style works perfectly well. Once i use the addonBefore prop, the input has a fixed square like style. Please what am i doing wrong?. My code is below, ps i am using Tailwind.

<Input
    className="h-12 rounded-full mt-1.5 border-lg-grey-100 pl-4"
    style={{
     paddingBottom: "10px",
     paddingTop: "10px",
     }}
     addonBefore={countries}
     placeholder={code}
     // variant="borderless"
     id="phone"
     onChange={handleChange}
 />

The addon before component

const countries = (
    <Select
      onChange={(value) => {
        setCode(value);
      }}
      defaultValue="+234"
    >
      <Option value="+234">{<Ng />}</Option>
      <Option value="+20">{<Gh />}</Option>
      <Option value="+20e">{<Eg />}</Option>
    </Select>
  );

You can check here for the image.

I am expecting the input component to follow the Tailwind classes i gave