Inject scripts and styles define in a parent to an iframe

I'm building a component library/css framework, and I want to demo it in an iframe to isolate the style from the page. My setup is a monorepo of Next.js (documentation/where I want to demo) and Vite.js (for the library code).

For rendering the iframe I'm using react-frame-component.

I have an entry script file like this for the library:

// vite-repo, loads all the styling:
import './index.scss'

// 
function init() {
}

init() 

then in react-components/pages I can import it like this:

// documentation/demo page
import Frame from 'react-frame-component'
import 'vite-repo' // loads the style of lib and executes the init function, want to do this on the iframe instead.

return Page() {
  // need to inject the styles and js to iframe (react-frame-component).
  <Frame>
  </Frame>
}

Any idea how can I do this? Building the library then importing them like this works, but I want to be able to do this on dev too (no access yet to the build bundle).

// documentation/demo page
return Page() {
  // Inject the styles and js to the iframe.
  <Frame head={
  <script src="/library.min.js"></script>
  <link rel="stylesheet" href="/library.min.css"></link>
  }>
  </Frame>
}