Update app sample to use ui5-webcomponents-react lib

Author: knewbury01

javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/package-lock.json

@@ -8,10 +8,11 @@
     "@types/node": "^16.18.108",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@ui5/webcomponents": "^2.2.0",
+    "@ui5/webcomponents": "^2.15.1",
     "@ui5/webcomponents-base": "^2.2.0",
     "@ui5/webcomponents-fiori": "^2.2.0",
     "@ui5/webcomponents-icons": "^2.2.0",
+    "@ui5/webcomponents-react": "^2.15.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/package.json

@@ -1,12 +1,13 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
-import "@ui5/webcomponents/dist/Input";
 
-import type Input from "@ui5/webcomponents/dist/Input";
+import { Input, InputDomRef } from "@ui5/webcomponents-react/Input";
+//import { DatePicker } from "@ui5/webcomponents-react/DatePicker";
 
 function App() {
-  const [todo, setTodo] = useState<String>("");
+  const [todo, setTodo] = useState<string>("");
 
-  const todoInput = useRef<Input>();
+  //const todoInput = useRef<typeof DatePicker>();
+  const todoInput = useRef<InputDomRef>(null);
 
   const handleAdd = useCallback(() => {
     setTodo((msg) => todoInput.current?.value || "", [setTodo]);
@@ -23,7 +24,7 @@ function App() {
 
   return (
     <div className="app">
-      <ui5-input placeholder="Type a task..." ref={todoInput} class="add-todo-element-width" id="add-input"></ui5-input>
+  <Input placeholder="Type a task..." ref={todoInput} id="add-input"></Input>
       <div dangerouslySetInnerHTML={{__html: todo}}></div>
     </div>
   );