Is it allowed to assign a child component to a const (inside the parent component) before returning it from a parent component?

I’d like to know whether this code: const linkButtonMovableElement, so storing another component’s invocation (not sure whether this is the correct term) in a parent component is acceptable / OK. Or maybe it’s not? Will it break something? Is it a bad practice to do it like that?

My code:

export function LinkButton(props: LinkButtonProps & HasChildren) {
  const { $type, children } = props;
  const [isActive, setIsActive] = useState(false);
  function onHoverIn() {
    setIsActive(true);
  }
  function onHoverOut() {
    setIsActive(false);
  }

  const linkButtonMovableElement = (
    <AnimatePresence>
      {isActive && (
        <motion.span
          className="link-button__movable-element"
          animate={{ width: "100%" }}
          exit={{ width: 0 }}
        />
      )}
    </AnimatePresence>
  );

  if ($type === "button") {
    const { onClick: onClickCallback } = props;
    return (
      <StyledButton
        animate={{
          color: isActive ? "var(--color-white)" : "var(--color-black)",
        }}
        onClick={onClickCallback}
        onMouseOver={onHoverIn}
        onMouseLeave={onHoverOut}
      >
        {children}
        {linkButtonMovableElement}
      </StyledButton>
    );
  }
  if ($type === "navlink" || $type === "link") {
    const {
      to,
      onHoverIn: onHoverInCallback,
      onHoverOut: onHoverOutCallback,
    } = props;
    function onHoverInLink() {
      onHoverIn();
      onHoverInCallback?.();
    }
    function onHoverOutLink() {
      onHoverOut();
      onHoverOutCallback?.();
    }
    return (
      <StyledLink
        animate={{
          color: isActive ? "var(--color-dark-grey)" : "var(--color-black)",
        }}
        onMouseOver={onHoverInLink}
        onMouseLeave={onHoverOutLink}
        as={$type === "navlink" ? NavLink : Link}
        style={{
          padding: $type === "navlink" ? "1.4rem" : "",
          textTransform: $type === "navlink" ? "uppercase" : "none",
        }}
        to={to}
      >
        {children}
        {linkButtonMovableElement}
      </StyledLink>
    );
  }
}