Im trying to render a multiple page pdf document in react. The pdf file is located in the src/assets. The jsx file is located in the src folder called Hero.jsx and for styling Im using css.
The pdf file should be rendered totally vertically.
I tried using react-pdf but seems like something got messed up and it isnt rendered.
If someone had a script for it, I would really appreciate it.
The webiste is so far for only for the client side.

import React, { useState } from 'react';
import { Worker } from '@react-pdf-viewer/core'; 
import { Viewer } from '@react-pdf-viewer/core'; 
import './Hero.css';
import myImage from './assets/profilepicture.png';
import myPDF from './assets/example.pdf';

const Hero = () => {
    
    
    return (
        <div className='hero1'>

                <div className='introduction'>
                    <div className='intr1'>
                        Üdvözlünk a MathPlus világában!
                    </div>
                    <div className='intr2'>
                        A MathPlus célja, hogy a matematikát és a kapcsolódó tudományterületeket mindenki számára elérhetővé és érthetővé tegye. Legyen szó érettségi felkészülésről, egyetemi vizsgákról vagy a data science világába való elmélyülésről, nálunk megtalálod azokat az online anyagokat, amelyekkel magabiztosan vághatsz neki a kihívásoknak.
                    </div>
                    <div className='intr2'>
                    Modern és felhasználóbarát platformunkon lépésről lépésre vezetünk végig a szükséges tananyagokon, hogy a lehető legjobban felkészülhess. Tanulj a saját tempódban, bárhol és bármikor! Nálunk nem csak megérted a matekot, de meg is szereted.
                    </div>
                </div>
                <div className='details'>
                    <div className='intr1'>
                        Kurzusok
                    </div>
                    <div className='intr2'>
                        A MathPlus küldetése, hogy a matematika és a kapcsolódó tudományterületek tanulását mindenki számára elérhetővé, érthetővé és élvezetessé tegye. Akár középiskolai érettségire készülsz, egyetemi vizsgákra tanulsz, vagy a data science területén szeretnél fejlődni, platformunkon olyan online kurzusokat találsz, amelyek támogatnak céljaid elérésében.
                    </div>
                    <div className='details-container'>
                        <div className='click-container'>
                            <h1 className='dch1'>
                                Középiskola
                            </h1>
                            <div className='button-group'>
                                <button className="school-button">Közép Matematika Érettségi</button>
                                <button className="school-button">Emelt Matematika Érettségi</button>
                                <button className="school-button">Közép Informatika Érettségi</button>
                            </div>
                        </div>
                        <div className='dchs'></div>
                        <div className='click-container'>
                            <h1 className='dch1'>
                                Egyetem
                            </h1>
                            <div className='button-group'>
                                <button className="school-button">Analízis</button>
                                <button className="school-button">Valószínűség számítás</button>
                                <button className="school-button">Lineáris Algebra</button>
                                <button className="school-button">Statisztika</button>
                                <button className="school-button">Ökonometria</button>

                            </div>
                        </div>
                        <div className='dchs'></div>
                        <div className='click-container'>
                            <h1 className='dch1'>
                                Programozás
                            </h1>
                            <div className='button-group'>
                                <button className="school-button">Bevezetés</button>
                                <button className="school-button">Machine Learning</button>
                                <button className="school-button">AI</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='about'>
                    <div className='intr1'>
                        Bemutatkozás
                    </div>
                    <div className='about2'>
                        <div>
                            <img src={myImage} className='profile-picture'/>
                        </div>
                        <div className='intr2'>
                            A nevem Horváth Máté, a MathPlus alapítója. Tanulmányaim során a Corvinus Egyetemen sok olyan emberrel találkoztam, akik nehezen vették az akadályokat akár egyetemi tárgyaknál vagy érettséginél. Ebből az okból indítottam el ezt az oldalt, hogy a tanulók, akik el akarják érni a céljaikat tudjanak is tenni érte, ráadásul könnyebben. Az oldal anyagai az elvárásokhoz igazítva lettek összeállítva, ezzel is növelve a felkészülés hatékonyságát. Minden kurzus tartalmaz egy ingyenes demó verziót, mely egy összefoglalója a kurzus anyagának és stílusának. Kifejezetten ajánlom a demo verzió használatát az előfizetés megkezdése előtt. Sikeres felkészülést!
                        </div>
                    </div>
                </div>
                <div style={{ height: '600px' }}>
                    <Worker workerUrl={`https://unpkg.com/[email protected]/build/pdf.worker.min.js`}>
                        <Viewer fileUrl="/assets/example.pdf" />
                    </Worker>
                </div>
        </div>
    );
};

export default Hero