NextJS - react-bootstrap getting error when using Form.Group

I am trying to play around with react-bootstrap with NextJS but immediately encountered error using Form.Group when trying to create a simple login page. I copied the below code from the official react-bootstrap page. I am not sure what I am doing wrong or am I missing something?

import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";

export default function SignIn() {
    return (
        <Form>
            <Form.Group className="mb-3" controlId="formBasicEmail"></Form.Group>
            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    );
}

and got this error when running 'npm run dev'

Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `FormGroup`.

package versions

"@types/react-bootstrap": "^0.32.37",
"bootstrap": "^5.3.3",
"next": "15.2.3",
"react": "^19.0.0",
"react-bootstrap": "^2.10.9",
"react-dom": "^19.0.0"

From what I can see, it looks like Form.Group is not supported anymore in Bootstrap V5. If you check the forms section and compare V4 and V5, you can see V4 still makes use of Form Group but in V5 Form Group is gone, they just directly use Form Label and Form text under the tag

Try not using Form.Group and directly use Form.Label and Form.Control inside your Form tag