How to use the dotnetify.useConnect function in dotnetify

export default () => {
  const [ newName, setNewName ] = useState('');

  // Connect this component to the back-end view model.
  const { vm, state } = useConnect('SimpleListVM', { Employees: [] });

  // Set up function to dispatch state to the back-end.
  const dispatch = state => vm.$dispatch(state);

  return (
    
      <header>
        <span>Add:</span>
         setNewName(value)}
          onUpdate={value =&gt; {
            dispatch({ Add: value });
            setNewName('');
          }}</header>

const ServerUpdate = () => {
  const { vm, state } = useConnect('ServerUpdate', { Greetings: '' });
  const [ firstName, setFirstName ] = useState('');
  const [ lastName, setLastName ] = useState('');

  const handleFirstName = e => setFirstName(e.target.value);
  const handleLastName = e => setLastName(e.target.value);
  const handleSubmit = () => vm.$dispatch({ Submit: { FirstName: firstName, LastName: lastName } });
  return (
    <div>
      <div>{state.Greetings}</div>
      <input value="{firstName}" type="text">
      <input value="{lastName}" type="text">
      <button>Submit</button>
    </div>
  );
};

export default () => {
  const { vm, state } = useConnect('App', { Links: [] });
  if (vm) vm.onRouteEnter = (path, template) => (template.Target = 'Content');

  return (
    <div>
      <nav>
        {state.Links.map(link =&gt; (
          
            {link.Caption}
          
        ))}
      </nav>
      <div style="{{" id="Content">
    </div>
  );
};
</div>

const RealTimePush = () => {
  const { state } = useConnect('RealTimePush', { Greetings: '', ServerTime: '' });
  return (
    <div>
      <p>{state.Greetings}</p>
      <p>Server time is: {state.ServerTime}</p>
    </div>
  );
};