cast-react: Instance not provided to CastProvider

[Impre-visible]

Hi, I saw ur package and wanted to give it a try, so after some digging, I found the document, I followed this one, but I got an issue, I have this exact error:

cast.hook.js:1 Uncaught Error: Cast instance not provided to <CastProvider />
    at useCast (cast.hook.js:1:1)
    at Video (Video.jsx:14:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)

But, I followed the documentation, I have a Cast.instance.js:

import { Cast } from '@jdion/cast'

export const castInstance = new Cast()

I have my Video Component, where I import and render the thing:

import { useCast, CastProvider } from '@jdion/cast-react';
import { castInstance } from './Cast.instance';

export const Video = () => {
  const { player: chromecast } = useCast()
  

  return (
    <CastProvider instance={castInstance} >
      <video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" />
    <CastProvider />
  )
};

export default Video;

If u could help that would be great, thanks

[Impre-visible]

After some work, I put the CastProvider in my App.jsx file, and it's not the same error now, now I just have a session_error, but it's an error that I don't have on the demo website, and nothing interesting is provided. Here's my code:
App.js

import React, { useEffect } from 'react';
import { Route, BrowserRouter, Routes, useLocation } from 'react-router-dom';

// routes imports
// ...

import "./App.css";

import { Cast } from '@jdion/cast'
import { CastProvider } from '@jdion/cast-react';

const castInstance = new Cast();


const App = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/movies/:lib" element={<Movies />} />
		  // ...
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export const Layout = ({ children }) => {

  return (
    <>
      <CastProvider instance={castInstance}>
        {children}
      </CastProvider>
    </>
  );
};

export default App;

Video.jsx

import { useCast } from '@jdion/cast-react';


export const Video = ({ options }) => {
  const { player: chromecastPlayer } = useCast()

  const handleCast = async () => {
    console.log('casting');
    chromecastPlayer.state.displayName = 'Chocolate'
    chromecastPlayer.state.title = options.title ?? 'Video';
    chromecastPlayer.state.imageUrl = options.cover;

    chromecastPlayer.startCast(options.sources[0].src, 'application/x-mpegURL')
    console.log(chromecastPlayer.getState());
  }


  return (
    <div>
      <div className='player-wrapper'>
        <button onClick={handleCast}>Cast</button>
      </div>
    </div>
  );
};

export default Video;

And I just have that in the console:

//my logs
Video.jsx:338 casting
Video.jsx:339 {title: undefined, sources: Array(1), cover: 'video_url'}
Video.jsx:345 {currentTime: 0, progress: 0, volume: 1, title: 'Video', imageUrl: 'image_url', …}
// the error
584:1 Uncaught (in promise) session_error```