React Three fiber shows the display in blank from i-pad - reactjs

Question

I am building my Portfolio using React three fiber, it shows the display on mobile and laptop or PC.
But when I'm trying to see on i-pad the display is blank.
I am trying to solve this problem, but I could not find any solution.
I will be happy if can give me some advice.
This is my code
import React, { useState, useRef, useEffect } from 'react';
import * as THREE from 'three';
import { extend, Canvas, useFrame } from 'react-three-fiber';
import * as meshline from 'threejs-meshline';
import Typical from 'react-typical';
// firebase
import firebase from '../firebase/firebase.utils';
// custom hook
import useAuthor from '../hooks/getAuthor';
// component
import Spinner from './Spinner';
import '../assets/styles/components/ThreeFiber.scss';
extend(meshline);
const numLines = 100;
const lines = new Array(numLines).fill();
const colors = ['#f6f6f6', '#fff8cd', '#6495ED'];
function Fatline() {
const material = useRef();
const [color] = useState(
() => colors[parseInt(colors.length * Math.random())]
);
const [ratio] = useState(() => 0.6 + 0.7 * Math.random());
const [width] = useState(() => Math.max(0.1, 0.1 * Math.random()));
// Calculate wiggly curve
const [curve] = useState(() => {
const pos = new THREE.Vector3(
30 - 60 * Math.random(),
-5,
10 - 20 * Math.random()
);
const points = new Array(30)
.fill()
.map(() =>
pos
.add(
new THREE.Vector3(
2 - Math.random() * 4,
4 - Math.random() * 2,
5 - Math.random() * 10
)
)
.clone()
);
return new THREE.CatmullRomCurve3(points).getPoints(500);
});
// Hook into the render loop and decrease the materials dash-offset
useFrame(() => {
material.current.uniforms.dashOffset.value -= 0.0005;
});
return (
<mesh>
<meshLine attach="geometry" vertices={curve} />
<meshLineMaterial
attach="material"
ref={material}
transparent
depthTest={false}
lineWidth={width}
color={color}
dashArray={0.2}
dashRatio={ratio}
/>
</mesh>
);
}
function Scene() {
let group = useRef();
let theta = 0;
// Hook into the render loop and rotate the scene a bit
useFrame(() => {
group.current.rotation.set(
0,
8 * Math.sin(THREE.Math.degToRad((theta += 0.02))),
0
);
});
return (
<group ref={group}>
{lines.map((_, index) => (
<Fatline key={index} />
))}
</group>
);
}
const ThreeFiber = React.memo(() => {
const collectionRef = firebase.firestore().collection('author');
const authorCollection = useAuthor(collectionRef);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
}, []);
return (
<div className="Hero_container">
<Canvas
camera={{ position: [0, 60, 10], fov: 150 }}
resize={{ scroll: false }}
>
<Scene />
</Canvas>
{loading ? (
authorCollection.map((author) => (
<h4 key={author.informations} className="Hero_content">
Hi! <br /> I'm {author.informations.name}, <br />
<Typical
loop={Infinity}
wrapper="b"
steps={[
'Front-end Developer with React',
1500,
'a self-taught Web Engineer',
1500,
]}
/>
</h4>
))
) : (
<Spinner />
)}
</div>
);
});
Thank you for your help.....