Each useToggle hook is its own entity with its own state. The useToggle that you are toggling in App isn't the same useToggle that is rendered/used in New.

This means they are toggled independently of any other hooks and state. They don't share "state".

If you are wanting to create a useToggle hook that does have shared state then I would suggest implementing it via a React context and the useContext hook so each useToggle hook can toggle the same shared state held in the context.

Update

Global useToggle hook.

togglecontext.js

import { createContext, useContext, useState } from 'react';

export const ToggleContext = createContext([false, () => {}]);

const ToggleProvider = ({ children }) => {
  const [onOff, setOnOff] = useState(false);
  const toggle = () => setOnOff(t => !t);

  return (
    <ToggleContext.Provider value={[onOff, toggle]}>
      {children}
    </ToggleContext.Provider>
  );
}

export const useToggle = () => useContext(ToggleContext);

export default ToggleProvider;

index - provide the context

...
import ToggleProvider from "./toggle.context";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <ToggleProvider>
      <App />
      <New />
    </ToggleProvider>
  </StrictMode>,
  rootElement
);

App

import "./styles.css";
import { useToggle } from "./toggle.context";

export default function App() {
  const [onOff, setOnOff] = useToggle();

  return (
    <div className="App">
      <h1>{onOff.toString()}</h1>
      <button onClick={setOnOff}>toggle</button>
    </div>
  );
}

New

import { useToggle } from "./toggle.context";

export default function New() {
  const [onOff] = useToggle();

  return (
    <div className="App">
      <hr />
      <h1>NEW:</h1>
      <pre>{onOff.toString()}</pre>
    </div>
  );
}

Note that the only thing that changed in the App and New components was the import, where the useToggle hook is defined.