Flutter Getx on list view error the improper use of a GetX has been detected

I am trying to use Getx on simple ListView but its showing error that [Get] the improper use of a GetX has been detected.

  Widget getBody() {
    var size = MediaQuery.of(context).size;
    final controller = Get.put(PassionController());

    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.only(left: 30, right: 30),
        child: Column(
          children: [
            GetX<PassionController>(
                builder: (_) => ListView.builder(
                    itemCount: controller.passionItems.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title:
                            Text('Number: ${controller.passionItems[index]}'),
                      );
                    })),
            GestureDetector(
              onTap: () {
                Navigator.push(
                    context, MaterialPageRoute(builder: (_) => MyHomePage()));
              },
              child: Container(
                width: size.width,
                height: 55,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30), color: Colors.white
                    // gradient:
                    //     LinearGradient(colors: [primary_one, primary_two])

                    ),
                child: Center(
                  child: Text(
                    "Continue",
                    style: TextStyle(
                        color: kPrimarycolor,
                        fontSize: 18,
                        fontWeight: FontWeight.w500),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

I also try GetxBuilder but same error showing. I already wrap GetMaterial on main.dart