How to use the react-tracking.useTracking function in react-tracking

const QuizReview = ({ quizAttemptId, hideTitle = false }) => {
  const [showReviewForConcept, setShowReviewForConcept] = useState(null);
  const tracking = useTracking();

  const { error, data } = useQuery(QUIZ_ATTEMPT_QUERY, {
    fetchPolicy: 'cache-and-network',
    variables: { id: quizAttemptId },
  });

  // Show modal with questions for a specific concept
  const showConceptReview = result => {
    setShowReviewForConcept(result.concept);
    tracking.trackEvent({
      page: 'QuizReview',
      quizAttemptId,
      action: 'STUDENT_REVIEW_CONCEPT',
      concept: result.concept,
      conceptScore: result.score,
      conceptPredictedScore: result.predictedScore,

export const ImageCarouselEmbedded = () => {
  const tracking = useTracking()
  const screenDimensions = useScreenDimensions()
  // The logic for cardHeight comes from the zeplin spec https://zpl.io/25JLX0Q
  const cardHeight = screenDimensions.width >= 375 ? 340 : 290

  const embeddedCardBoundingBox = { width: screenDimensions.width, height: isPad() ? 460 : cardHeight }

  const {
    images,
    embeddedFlatListRef: embeddedFlatListRef,
    embeddedImageRefs: embeddedImageRefs,
    dispatch,
    imageIndex,
  } = useContext(ImageCarouselContext)

  const measurements = getMeasurements({ images, boundingBox: embeddedCardBoundingBox })
  const offsets = measurements.map(m => m.cumulativeScrollOffset)

export function useNewImageCarouselContext({ images }: { images: ImageDescriptor[] }): ImageCarouselContext {
  const embeddedImageRefs = useMemo(() => [], [])
  const embeddedFlatListRef = useRef>()
  const [imageIndex, setImageIndex] = useGlobalState(0)
  const [lastImageIndex, setLastImageIndex] = useGlobalState(0)
  const [fullScreenState, setFullScreenState] = useGlobalState("none" as FullScreenState)
  const [isZoomedCompletelyOut, setIsZoomedCompletelyOut] = useGlobalState(true)
  const tracking = useTracking()

  return useMemo(
    () => ({
      imageIndex,
      lastImageIndex,
      fullScreenState,
      isZoomedCompletelyOut,
      images,
      embeddedImageRefs,
      embeddedFlatListRef,
      dispatch: (action: ImageCarouselAction) => {
        switch (action.type) {
          case "IMAGE_INDEX_CHANGED":
            if (imageIndex.current !== action.nextImageIndex) {
              tracking.trackEvent({
                action_name: Schema.ActionNames.ArtworkImageSwipe,

({ content, maxChars, presentLinksModally, color, trackingFlow, contextModule, sans }: Props) => {
    const [isExpanded, setIsExpanded] = useState(false)
    const tracking = useTracking()
    const basicRules = defaultRules(presentLinksModally)
    const TextComponent = !!sans ? Sans : Serif
    const rules = {
      ...basicRules,
      paragraph: {
        ...basicRules.paragraph,
        react: (node, output, state) => {
          return (
            
              {!isExpanded && Number(state.key) > 0 ? "⁠ — " : null}
              {output(node.content, state)}
            
          )
        },
      },
    }