What is React Playing Card

Playing cards will be given out to n(number) people

Total 52 cards containing 1-13 of each Spade(S), Heart(H), Diamond(D), Club(C) will be given to n people randomly.

PHP : Laravel 7.8 Used
Javascript : ES6 Used
jQuery : Not usd
ReactJS : ReactJS 16 is used with MaterialUI
You can use any or combination of those languages. If you decide to use a combination of languages, please provide in 2 types, front end & back end codes.
This codes will later be tested in our apache server as the backend and chrome browser as the front end.

Number of people (numerical value)
It does not matter how cards are given if recompile of program arguments, parameter, keyboard input and so on are not necessary.
In case input value is nil or value is invalid then error message of “Input value does not exist or value is invalid” must be displayed and process must be terminated.
Any number less than 0 are invalid value.
Greater than 53 are normal value and cards must be distributed to number of people instead of having it as an error.

Spade = S, Heart = H, Diamond = D, Club = C
2-9 are as it is, 1=A,10=X,11=J,12=Q,13=K
The card distributed to the first person on the first row will be separated (comma),
The card distributed to the second person on the second row will be separated(comma),
[LF] is not allowed. Example:

S-A,H-X,.....
D-3,H-J,.....

Please submit your work in Github repo (prefered) or a zipped file.
Please enter comments if you think it is necessary.
Please enter irregular processing to where there might be a possibility that an irregular occurs.
Message “Irregularity occurred” must be displayed and the process must be terminated if any irregular occur.
All comments, usage manuals, and remarks must be explained in the source code.
Please create above and reply to me with the total time you have spent on.
Reproduction / Reprint are prohibited.