Any help for using Framework7 with SolidJS?

/* @refresh reload */
import "framework7/css/bundle"
import { SplashScreen } from '@capacitor/splash-screen';
import { render } from 'solid-js/web';

import Framework7 from "framework7";
import { createSignal } from "solid-js";

const root = document.getElementById('root') as HTMLDivElement;
const MyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>Value is {a()}</p>
      <a class="link" href="/about">ABOUT</a>
    </div>
  )
}
const AboutMyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>ABOUT PAGE {a()}</p>
    </div>
  )
}

render(() => {
  SplashScreen.hide();

  const app = new Framework7({
    el: "#root",
    name: "Pawnote",
    
    panel: { swipe: true },
    
    routes: [
      { path: "/about/", content: AboutMyComponent() },
      {
        path: '(.*)',
        content: MyComponent(),
      }
    ]
  });

  app.views.create(root);
  
  return (
    <></>
  )
}, root);

/* @refresh reload */
import "framework7/css/bundle"
import { SplashScreen } from '@capacitor/splash-screen';
import { render } from 'solid-js/web';

import Framework7 from "framework7";
import { createSignal } from "solid-js";

const root = document.getElementById('root') as HTMLDivElement;
const MyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>Value is {a()}</p>
      <a class="link" href="/about">ABOUT</a>
    </div>
  )
}
const AboutMyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>ABOUT PAGE {a()}</p>
    </div>
  )
}

render(() => {
  SplashScreen.hide();

  const app = new Framework7({
    el: "#root",
    name: "Pawnote",
    
    panel: { swipe: true },
    
    routes: [
      { path: "/about/", content: AboutMyComponent() },
      {
        path: '(.*)',
        content: MyComponent(),
      }
    ]
  });

  app.views.create(root);
  
  return (
    <></>
  )
}, root);