How do I implement a feaure that allows user to plot points on an image from the front end?

Question

I'm a beginner to frontend and I have a use case where I allow user to select an image and plot points on it. Later I want to collect the coordinates of plotted points and do some basic math with them like calculating distance, area etc.

I'm using react canvas draw to get the drawing done. Below is a rough code of what I have done so far.

import React, {Component} from 'react'
import CanvasDraw from 'react-canvas-draw'

class DemoApp extends Component {

    constructor (props) {
        super()

        this.state = {
            showCanvas : false,
            image : null,
            coords : {
                p1: null,
                p2: null
            },
            canvasHeight: 500,
            canvasWidth: 800,
            lazyRadius : 0,
            brushRadius : 5
        }
    }    

    showCanvas = () => {
        this.setState ({ showCanvas : true })
    }

    handleCanvasChange = (e) => {
        let point = e.catenary.p1;
        
        let coord = this.state.coords;

        if (coord.p1 == null) {
            coord.p1 = [point.x, point.y]
        } else if (coord.p2 == null) {
            coord.p2 = [point.x, point.y]

            this.setState ({
                coords : coord
            })
        }
    }

    onImageChange = (event) => {
        this.setState ({
            showCanvas : false
        })

        if (event.target.files && event.target.files[0]) {
            this.setState({
                image: URL.createObjectURL(event.target.files[0])
            });
        }
    }

    render() {
        return (
            <div>
                <div>
                    <input type="file" onChange={this.onImageChange} /> <br/>
                    <button onClick={this.showCanvas}>Show Canvas</button>
                </div>
                {
                    this.state.showCanvas && 
                    <div>
                        <button
                            onClick={() => {
                            this.saveableCanvas.clear();
                            }}
                        >
                            Clear
                        </button>
                        <button
                            onClick={() => {
                            this.saveableCanvas.undo();
                            }}
                        >
                            Undo
                        </button>
                    </div>
                }

                {
                    this.state.showCanvas &&
                    <div className = "container">
                        <CanvasDraw
                            onChange={this.handleCanvasChange}
                            brushColor="rgba(0,0,0)"
                            imgSrc={this.state.image}
                            canvasHeight={this.state.canvasHeight}
                            canvasWidth={this.state.canvasWidth}
                            lazyRadius = {this.state.lazyRadius}
                            brushRadius = {this.state.brushRadius}
                            ref={canvasDraw => (this.saveableCanvas = canvasDraw)}
                        />
                    </div>
                }
            </div>
        )
    }
}

export default DemoApp

And below image is the result. User can select an image and draw stuff on it (Undo and clear button are missing in the screenshot)

Is storing coords data in state a good way to do this? Because this doesn't look scalable if I want to extend this to multiple images.

Also below are the things I am stuck with and need some help.

1. react-canvas-draw reads mouse-down and mouse-up and draws a curve following the mouse pointer. How can I override this to read only the mouse-down so that I'll only get a point instead of a curve?
2. I want to allow user to select multiple images. How do I change the <input> tag to achieve this?
3. I want to display multiple images in some sort of gallery thing. I didn't find much resources as of how to do this.
4. On selecting an image from gallery, a modal should pop up with canvas-draw component in it. How can I do it?

react-canvas-draw was a library I found upon googling. Is there a better way to implement this without using react-canvas-draw?

Thanks in advance.