Chakra UI and React | Popover trigger not working

Question

Whenever, I click this profile component; the popover will be trigger. But, I wrap the children of <PopoverTrigger>...code</Popovertrigger> into this <PopoverTrigger><ProfileComponent/></Popovertrigger> Because of this, the popover is not working, I just wrap the children because I want the ProfileComponent is reusable

This is my whole code

Profile Component

interface IProfileProps extends BoxProps {
  query: boolean;
}

const Profile = ({ query }: IProfileProps) => {
  return (
    <Box px={query ? "0px" : "5"} w="full" position="absolute" bottom="10">
      {" "}
      <HStack
        p="10px"
        borderRadius="full"
        w="full"
        h="full"
        // spacing="20px"
        cursor="pointer"
        _hover={{ bg: "rgba(255, 233, 206, 0.45)" }}
      >
        <Image
          m={query ? "auto" : "0"}
          boxSize="45px"
          borderRadius="full"
          alt="user profile"
          src="https://i.pinimg.com/originals/32/38/6c/32386c72c7f2a8b5c1a10fc51c149cb1.jpg"
        />
        <VStack
          spacing="5px"
          alignItems="baseline"
          w="full"
          h="full"
          display={{ lg: query ? "none" : "block" }}
        >
          <Text fontWeight="bold">Mosh Ontong</Text>

          <HStack color="green.400">
            <Icon as={MdVerifiedUser}></Icon>
            <Text fontWeight="bold" fontSize="0.8rem">
              Verified
            </Text>
          </HStack>
        </VStack>
        <Icon
          as={HiDotsVertical}
          boxSize="20px"
          display={{ lg: query ? "none" : "block" }}
        />
      </HStack>{" "}
    </Box>
  );
};

Then my Profile Popover Component

const DesktopProfile = ({ query }: IProfileProps) => {
  const initRef = React.useRef<HTMLButtonElement>(null);
  return (
    <Popover placement="right" initialFocusRef={initRef}>
  {/* //Focus here */}
      <PopoverTrigger>
     {/* //So this is my Profile Component,
 when I click this profile component it failed to trigger the popover */}
        <Profile query={query} />
      </PopoverTrigger>

      <PopoverContent color="white" bg="blue.800" borderColor="blue.800">
        <PopoverHeader pt={4} fontWeight="bold" border="0">
          Mosh Ontong
        </PopoverHeader>
        <PopoverArrow />
        <PopoverCloseButton />
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore.
        </PopoverBody>
        <PopoverFooter
          border="0"
          d="flex"
          alignItems="center"
          justifyContent="space-between"
          pb={4}
        >
          <Box fontSize="sm">Step 2 of 4</Box>
          <ButtonGroup size="sm">
            <Button colorScheme="green">Setup Email</Button>
            <Button colorScheme="blue" ref={initRef}>
              Next
            </Button>
          </ButtonGroup>
        </PopoverFooter>
      </PopoverContent>
    </Popover>
  );
};

My goal is the popovertrigger tag accept my ProfileComponent as the trigger of Popover

Answer 1

I solved the problem I just wrapped my ProfileComponent

 <PopoverTrigger>
        {/* I wrapped my Profile Component*/}
        <Box px={query ? "0px" : "5"} w="full" position="absolute" bottom="10">
          <Profile query={query}></Profile>
        </Box>
      </PopoverTrigger>