Void element tag must not have children or dangerouslySetInnerHTML
%s is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
React threw this error because a void HTML element such as `img`, `input`, or `br` was rendered with children or `dangerouslySetInnerHTML`, which HTML does not allow for those tag types.
%s is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
Why it happens
A void HTML element such as `img`, `input`, `br`, or `hr` was rendered with nested children.
A void element was given `dangerouslySetInnerHTML` even though that tag type cannot contain content.
A reusable JSX wrapper passed children into a tag that only supports self-closing output.
How to fix it
Remove all children from the void element and render it as a self-closing tag.
Do not use `dangerouslySetInnerHTML` on void tags such as `img`, `input`, `br`, or `hr`.
For a text field, replace <input>Name</input> with <label>Name<input name="name" /></label>. The label contains the text; the input remains empty.
For a submit control, use <input type="submit" value="Save" /> or <button type="submit">Save</button>. A button can contain text, while an input cannot.
Inspect spread props in reusable components. Even <input {...props} /> can fail if props contains children or dangerouslySetInnerHTML. Remove those properties before forwarding props to the native input.
Reproduce the failing screen in development and follow the component stack to the native element. Test both the direct element and any wrapper with the same props after the change.
