New environment variables reading as empty string in Vite project

I have set up a Vite project with an .env file to read some environment variables, but some environment variables I create for my machine appear as an empty string.

I have created a new environment variable in my terminal: export VITE_TEST="TESTING"

Printed it out to confirm it was set: echo $VITE_TEST // Output: TESTING as expected

I have set up an .env file to read this new env var:

VITE_ENV_TEST=$VITE_TEST

When I print out this env var I defined in my .env file::

App.tsx

...
function App() {
    const [count, setCount] = useState(0);
    const test = import.meta.env.VITE_ENV_TEST;
    console.log(test);

   return (
      <P>{test}</p>
   )
}
...

The output in an empty string.

However when I update my .env file to use a system env var such as $HOME:

.env

VITE_ENV_TEST=$HOME

It correctly prints out my home directory.

Does anyone know why the new environment variable I created would not print correctly while $HOME does?