react-router-dom blank screen when routing

I'm poking around with react routing and can't get it to work. I've stripped down to an empty new project just to test the fundamentals, and still can't get it running. I am using vscode and generated my react project using npx. This is my current code:

App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import './App.css';
import Landing from './components/Landing'

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Landing />} />
      </Routes>
    </BrowserRouter>
  );
}

index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

My landing.js is just a text entry, which I have confirmed does work if there is no BrowserRouter wrapper.

I've tried:

• Adding <h1>Hello</h1> within <BrowserRouter> to see if it would render prior to the Routes -- it did not.
• Varying syntaxes (component vs element keyword, different paths)
• Leaving index.js as default and doing routing in App.js
• Leaving App.js as default and doing routing within the render function in index.js

All of the resources I've found online for react-router-dom@6 points that this (or some iteration of what I've done) is correct, yet I get a blank screen no matter what I do once I wrap within <BrowserRouter>.

Any help would be invaluable at this point; I don't think I'll be able to continue on my own.