React Bootstrap Form.Control as customInput possible?

[f-fuchs]

Hey,

I want to localize my number input and I found this library.
Everything works like I want but I can't connect the InputField to the form group.
I tried passing the Form.Control element as customInput but then everything NumericFormat does stops working and its just a plain text input again.

Is there a way to keep NumericFormat working but style it like Form.Control and connect it to the Form.Group?

// weightInput
const weightInput = (props: any) => {
    return <Form.Control />;
};

<Form.Group
    as={Row}
    className="mb-3"
    controlId="formPlaintextInvZea"
>
    <Form.Label column sm="3">
        {t("deviceAddModel.label.weight")}:*
    </Form.Label>
    <Col sm="1">
        <NumericFormat
            decimalSeparator=","
            allowNegative={false}
            value={weight}
            valueIsNumericString={true}
            //customInput={weightInput}
            onValueChange={(values, sourceInfo) => {
                console.log(values, sourceInfo);
                setWeight((values.floatValue ??= 0));
            }}
            suffix="kg"
        />
    </Col>
    {/* <Form.Label column sm="1">
        kg
    </Form.Label> */}
</Form.Group>