Help with a react component

#javascript #react #marquee

I am trying to write a vanilla marquee onto a picture using react-Bootstrap. I have written the js, which works great outside react. I need help getting the typed script over to the image.
Here is the js file:

import React, { Component, useEffect, useState } from 'react'

import Sadeyes from './sadeyes.jpg'

const SadeyesText = () =>{

const bannerText = new Array("our world is changing", "so is therapy");
const iSpeed = 100; // time delay of print out
const iNewLine = 500; // time delay at line breaks
const iIndex = 0; // start printing array at this position
const iArrLength = bannerText[0].length; // the length of the text array

const iScrollAt = 20; // start scrolling up at this many lines

const iTextPos = 0; // initialise text position
const sContents = ""; // initialise contents variable
let iRow; // initialise current row

const typewriter = (props) => {
sContents = " ";
iRow = Math.max(0, iIndex - iScrollAt);
var destination = document.getElementById("typedtext");

while (iRow < iIndex) {
sContents += bannerText[iRow++] + "
";
}
test = sContents + bannerText[iIndex].substring(0, iTextPos);
destination.innerHTML = test
console.log(test[test.length - 1])
if (iTextPos++ == iArrLength) {
iTextPos = 0;
iIndex++;
if (iIndex != bannerText.length) {
iArrLength = bannerText[iIndex].length;
setTimeout("typewriter()", iNewLine);
}
} else {
setTimeout("typewriter()", iSpeed);
}
}

useEffect(() => {
window.typewriter()

return () => {
window.removetypewriter()
}, [])
}

export default SadeyesText

Here is the picture:

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import { Container } from 'react-bootstrap'
import Image from "react-bootstrap/Image";
import sadeyes from './sadeyes.jpg'
import './sadeyestext.component'

import './home.styles.scss'

export default function Sadeyes () {
return (

src={sadeyes} alt="sadeyes" />

{}

);
}

Thanks for your help