React Three React, canvas not responsive

Question

I'm struggling with the responsiveness of the Fiber Three canvas.

Indeed when i replace the Canvas by the by something else... Well everything seems to be responsive and works
Without canvas, every thing seems good

Added the canvas

Here's the App.js code :

import React from "react";
import Scene from "./Scene";

export default function MainTitle() {
  return (
    <section className="flex flex-auto justify-center items-center w-full h-screen bg-orange-500">
      <div className="flex-row-reverse flex-auto w-1/2 h-full lgs:flex" >

        {/* 3D avatar's face */}
        <div className="w-auto h-2/3 bg-blue-900 lgs:w-1/2 lgs:h-full" name="avatar_face">
          <div style={{ width: "100%", height: "100%" }}>
            <Scene/>
          </div>
        </div>
        
        
        {/* Greetings */}
        <div className="w-auto h-1/3 bg-blue-400 lgs:bg-red-400 lgs:w-1/2 lgs:h-full"  name="greetings">
          hello
        </div>
      </div>

  </section>
  );
}

Here's the Scene.js file :

import React, { Suspense, useEffect, useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { Model } from './Avatar'

export default function Scene() {

  return (
    <Canvas
      camera={{ position: [2, 0, 12.25], fov: 15 }}
      style={{
        backgroundColor: '#111a21',
      }}
      updateDefaultCamera ={true}
    >
      <ambientLight intensity={1.25} />
      <directionalLight intensity={0.4} />
      <mesh scale={5} position={[1.17, -2.48, 0]}>
        <Suspense fallback={null}>
          <Model position={[-0.12, -0.1, 0.7]} /> /* highlight-line */
        </Suspense>
      </mesh>
    </Canvas>
  );
}

Answer 1

For those who are looking for an answer. I have found a way :

npm install --save react-resizable

And then you can put anything as child of the component:

import { Resizable } from 'react-resizable';

// ...
class Example extends React.Component {
  state = {
    width: 200, // or "100%" to fill the parent size
    height: 200,
  };

  // On top layout
  onResize = (event, {node, size, handle}) => {
    this.setState({width: size.width, height: size.height});
  };

  render() {
    return (
      <Resizable height={this.state.height} width={this.state.width} onResize={this.onResize}>
        <div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
          <span>Contents</span>
        </div>
      </Resizable>
    );
  }
}