How do I implement testing on a component with destructured props?

I'm trying to implement testing on a form that I built using React with Material UI.

It has destructured props on an arrow function component that I want to test. How would I get around this? I've tried using Jest with Enzyme but I get errors.

Main JS for declaring values:

const Main = () => {
  const [steps, setSteps] = useState(0);
  const [values, setValues] = useState({
  one: "",
  two: "",
  three: ""
  });

Component code:

const Component = ({
  values: { one, two, three })
})
 => {
  const checkLength =
    one.length > 0 &&
    two.length > 0 &&
    three.length > 0;

return (
    <div className="testing">
          <TextField
            label="one"
            name="one"
            placeholder="Value One"
            defaultValue={one}
            onChange={handleChange("one")}
          />
}

Test code:

import React from 'react';
import { mount } from 'enzyme';
import Component from 'Component';

describe('Component', () => {
it('Should capture one correctly onChange', function(){
  const component = mount(<Component />);
  const input = component.find('input').at(0);
  input.instance().value = 'hello';
  input.simulate('change');
  expect(component.state().one).toEqual('hello');
});
});

I expect to be able to test the input value by adding a 'hello' to see if it works. I get this error:

TypeError: Cannot destructure property `one` of 'undefined' or 'null'.
    > 10 |   values: { one, two, three }