I created a functional React component to render a videojs player which works really well, but now I'm trying to add a plugin (in this case I'm trying with videojs-preview: https://www.npmjs.com/package/videojs-preview) and it fails. Here is my component:

import React, { useCallback, useEffect, useState } from 'react';
import videojs from 'video.js';
import preview from 'videojs-preview';

const Player = (props) => {
  const [videoEl, setVideoEl] = useState(null);
  const onVideo = useCallback((el) => {
    setVideoEl(el);
  }, []);

  useEffect(() => {
    if (videoEl == null) return;
    videojs.registerPlugin('videojs-preview', preview);
    videojs(videoEl, { ...props }, () => {
      videojs.preview();
    });
  }, [props, videoEl]);

  return (
    <div data-vjs-player>
      <video ref={onVideo} className="video-js vjs-big-play-centered mt-10" playsInline crossOrigin="anonymous" height={630} autoPlay />
    </div>
  );
};

export default Player;

The error I'm getting is: TypeError: video_js__WEBPACK_IMPORTED_MODULE_2___default(...).preview is not a function