What is the difference between the addEventListener API for "mouseenter" /"mouseleave" and React's onMouseEnter/onMouseLeave?

What is the difference between using the addEventListener API in the element reference and using the property of these events already built into the React element? Is there any difference in performance from one mode to another? Would one way be more certain than the other?

import React, { useEffect, useRef } from 'react';

export const Component = () => {
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    divRef?.current.addEventListener('mouseenter', () => {
      //...
    });

    divRef?.current.addEventListener('mouseleave', () => {
      //...
    });
  });

  return <div 
    onMouseEnter={() => console.log('on mouse enter react')} 
    onMouseLeave={() => console.log('on mouse leave react')}
  />;
};