Making a phone number input?

[lean bloom]

What would be the easiest way to create a phone number input with a fixed country code section to the left that's visible but not changeable?

I'm trying a few things but right now text input is the best I can do with inside a group with a text element showing the country code but it looks super janky

<Group>
    <TextInput disabled value="+92" style={{ width: 60 }} />
    <TextInput
        mt={5}
        label="Phone Number"
        placeholder="315xxxxxxx"
        variant="filled"
        required
        value={phoneNumber}
        onChange={ev => setPhoneNumber(ev.currentTarget.value)}
    />
</Group>

Is there no way to implement a leftSection in a TextInput?

[boreal rampart]

Use icon prop https://codesandbox.io/s/frosty-microservice-kv6mfr?file=/src/App.tsx

[lean bloom]

That works for now, any suggestions on making the design cleaner, adding a divider to the right of the text somehow?

[wispy bison]

icon accepts a React Node.

Combine it with iconWidth.