Why does this react component not re-render properly?

I have build this component in order to embed a vimeo video on a site.

import React, { FC, useEffect, useState } from "react";
import ReactPlayer from "react-player/vimeo";
export interface VimeoPlayerProps {
  url: string;
  id: string;
}
const VimeoPlayer: FC<VimeoPlayerProps> = ({ url, id }) => {

    return (
      <div style={{ background: "blue" }}>
        <ReactPlayer url={url} controls={true} autoPlay={true} width={"30%"} height={200} />;<div>{url}</div>
      </div>
    );

};

export default VimeoPlayer;

And this is where I call this component

const [videoUrl, setVideoUrl] = useState<string>("");
//some operations that set the videoUrl
return (
        <IonModal
          isOpen={showModal}
          cssClass="modalContainer"
          swipeToClose={true}
          onDidDismiss={() => setShowModal(false)}
        >
          <ModalContainer>
            <CloseModalButton onClick={() => setShowModal(false)} src={CloseModalIcon} alt="close modal button" />
            <VimeoPlayer url={videoUrl} id={id}></VimeoPlayer>
          </ModalContainer>
        </IonModal>
  );
};

initially the url is empty then it is set to a real url, the div tag in the vimeoplayer component is updated accordingly but the react-video component is not updated to display the video that has received via the url.