Can I call a functional component inside a custom hook? Is it okay for such a hook to be a .tsx, not .ts files?

Question

I made a custom hook that wraps Chakra's custom hook. Chakra UI is a component library.

export const useToast = () => {
  const chakraToast = useChakraToast();

  // ...

  const toast = ({ id, title, delay, position = `bottom-right` }: Options) => {
    return chakraToast({
      id,
      position,
      duration: null,
      render: ({ onClose }) => (<Toast title={title} onClose={onClose} />)
    });
  };

  // ...

  return toast;
};

As you can see, I need to tell Chakra to use my Toast component. The question is, is it okay to call a functional component in a custom hook? If so, I need to change the extension of my custom hook file from .ts to .tsx. Is it okay as well?

Thanks!