Is there a way to load images from a directory (inputed from a input type="file") and convert them to blob in reactjs?

I am building an app that has an directory input on the first page (named import). When you submit, it should display the images in the directory (named select). The problem lies in displaying the images.

I get only a relative directory, because of security in the browser. So I have load them from the relative link but can this work?

Import.Js

export default function Import(props) {
    let history = useHistory();

    function onValueChange(event) {
        event.preventDefault();
    }

    function submit(event) {
        if (event.target.children[0].children[1].files.length === 0) return;
        event.preventDefault();
        props.onFolderSubmit(event);
        history.push('/select');
    }

    return (
        <div>
            <h1>Import</h1>

            <Container>
                <Form inline onSubmit={submit}>
                    <Form.Group controlId="formDirectory">
                        <Form.Label>Choose directory</Form.Label>
                        <Form.Control type="file"
                                      webkitdirectory="true"
                                      directory="true"
                                      multiple
                        />

                    </Form.Group>
                    <Button variant="primary" type="submit">
                        Submit
                    </Button>
                </Form>
            </Container>
        </div>
    );
}

Select.js

export default function Select(props) {
    let history = useHistory();
    if (props.files.length === 0) history.push('/');

    function onSubmit() {
        history.push('/export');
    }

    return (
        <div>
            <h1>Select</h1>
            {
/// change code below

                props.files.map(
                    file =>
                        <div key={file.name}>
                            <p>{file.name}</p>
                            <img src={file.webkitRelativePath}/>
                        </div>
                )
            }
/// change code above

        </div>
    );
}

I found the way to load and convert one image on stackoverflow, here is the link. But I don’t know how I can implement it in my code, because it should load multiple images. Can anyone help me out?